Objets Javascript

Définition des objets JavaScript

En général, JavaScript est connu comme un langage de programmation orientée objet. Par conséquent, en JavaScript, les objets sont les types de données et les formes les plus importants. Ils sont totalement différents des types de données primitifs en JavaScript. Comme mentionné dans le chapitre “Data types”, il existe sept types de données en JavaScript, dont six sont appelés “primitifs” car leurs valeurs comprennent une seule chose (c'est peut être un nombre, une chaîne, etc.).

Contrairement aux types de données, nous utilisons des objets pour stocker des collections clés de différentes données et des entités plus compliquées. En JavaScript, les objets sont inclus dans tous les aspects du langage, vous devez donc les apprendre dès que vous commencez à étudier le langage.

Les objets sont créés avec des accolades {…} et doivent avoir une liste de propriétés. La propriété est connue comme une “key: value”, dans laquelle key ou le nom de la propriété est une chaîne et value peut être quoi que ce soit.

Vous pouvez créer un objet vide en exécutant l'une des syntaxes suivantes:

let user = new Object(); // "object constructor" syntax
let user = {}; // "object literal" syntax

En règle générale, on utilise des accolades {…}. Cette déclaration est appelée objet littéral.

Propriétés et littéraux

Vous pouvez immédiatement entrer des propriétés dans ces accolades sous forme de paires de “key: value”, comme ceci:

Javascript create object

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; console.log(site);

site a une propriété : le nom "name" et la valeur "W3Docs".

Les valeurs des propriétés peuvent être accessibles en utilisant la notation point, comme suit:

Javascript get property values of the object

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; // get property values of the object: console.log(site.name); // W3Docs

Il peut avoir n'importe quel type de valeur. Par exemple:

Javascript object add a property

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; site.haveAdmin = true; console.log(site);

L'opérateur delete est utilisé pour supprimer une propriété. Par exemple:

Javascript object delete a property

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" haveAdmin: true }; delete site.name; console.log(site);

Les noms de propriété Multiword peuvent également être utilisés. Mais ils doivent être cités comme ceci:

Javascript object multiword a property

let user = { site: "W3Docs", "teaches JS": true // multiword property name must be quoted }; console.log(user);

Terminez la dernière propriété de la liste par une virgule:

Javascript objects

let site = { name: "W3Docs", haveAdmin: true, } console.log(site);

Crochets carrés

L'accès par point ne fonctionne pas pour des propriétés multi-mots. Voici un exemple:

// this would give a syntax error
site.teaches JS = true

Le point nécessite que la clé soit un identifiant de variable valide. Cela signifie aucune limitation, comme les espaces, etc.

Vous pouvez utiliser une alternative de notation de crochets carrés. Elle fonctionnera avec n'importe quelle chaîne. Par exemple:

Javascript objects with square bracket

let site = {}; // set site["teaches JS"] = true; // get console.log(site["teaches JS"]); // true // delete delete site["teaches JS"]; console.log(site);

Avec l'aide des crochets carrés, vous pouvez conserver le nom de la propriété en tant que résultat de n'importe quelle expression comme ceci:

Javascript objects

let site = {}; let key = "teaches JS"; // same as site["teaches JS"] = true; site[key] = true; console.log(site);

Dans ce cas, la variable key peut soit être mesurée à l'exécution, soit dépendre de l'entrée de l'utilisateur. Ensuite, vous pouvez l'utiliser pour accéder à la propriété comme suit:

Javascript object properties

let site = { name: "W3Docs", }; let key = prompt("What do you want to know about the site?", "name"); console.log(site[key]); // If enter "name", you will see W3Docs

Notez que vous ne pouvez pas utiliser la notation point de la même façon:

Javascript objects can’t use the dot notation

let site = { name: "W3Docs" }; let key = "name"; console.log(site.key) // undefined

Propriétés calculées

Les crochets carrés sont également utilisés dans un objet littéral. C'est connu sous le nom de propriétés calculées.

Voici un exemple:

Javascript the object's property name is taken from the variable

let car = prompt("Which car do you like?", "bmw"); let color = { [car]: "white", // the property's name is taken from the variable car }; console.log(color.bmw); // white, if car="bmw"

Vous pouvez également utiliser des expressions plus compliquées dans des crochets carrés, comme ceci:

Javascript object's more complicated expressions in square brackets

let car = 'bmw'; let carColor = { [car + 'Color']: 'white' // carColor.bmwColor = 'white' }; console.log(carColor.bmwColor); // white

Donc, lorsque le nom de la propriété est simple et connu, vous pouvez utiliser des points. Et lorsque vous avez besoin de quelque chose de plus compliqué, vous passez aux crochets carrés.

Raccourci pour le nom de la propriété

Dans le code réel, les variables existantes sont souvent utilisées comme noms de valeur de propriété.

Voici un exemple:

Javascript object's property name values

function makeCar(name, model) { return { name: name, model: model, // ...other properties }; } let car = makeCar("BMW", "M5"); console.log(car.name); // BMW

function makeCar(name, model) {
  return {
    name, // same as name: name
    model // same as model: model
    // ...
  };
}

Les propriétés normales et les raccourcis peuvent être utilisés dans le cadre du même projet. Cela ressemblera à ceci:

Javascript objects

let car = { name, // same as name:name model: "M5" }; console.log(car);

La boucle “for...in”

La boucle “for...in” loop est une forme unique de boucle. Elle est totalement différente de la boucle for(;;).

La syntaxe est la suivante:

for (key in object) {
  // executes the body for each key among object properties
}

Voyons un exemple, où toutes les propriétés de car sont affichées :

Javascript objects for in loop

let car = { name: "Mercedes", model: "C-Class Cabriolet", toDrive: true }; for (let key in car) { // keys console.log(key); // name, model, toDrive // values for the keys console.log(car[key]); // Mercedes, C-Class Cabriolet, true }

Notez que toutes les constructions de “for” permettent de déclarer la variable de boucle dans la boucle. Par exemple, let key dans l'exemple ci-dessus. Un autre nom de variable peut également être utilisé à la place de key.

Vérification de l'existence

Un des avantages les plus importants des objets est qu'ils donnent accès à n'importe quelle propriété. Aucune erreur ne se produira, si la propriété n'existe pas. Si vous accédez à une propriété non existante, vous serez renvoyé à undefined. Il donne une opportunité unique de vérifier si la propriété existe ou non:

Javascript objects property is undefined

let car = {}; console.log(car.noSuchProperty === undefined); // true means "no such property"

Vous pouvez également utiliser un opérateur unique "in" pour vérifier l'existence d'une propriété. Pour l'exécuter, utilisez la syntaxe suivante:

"key" in object

Copie par référence

Une des principales différences entre les objets et les primitifs est qu'ils peuvent être stockés et copiés par référence.

Vous pouvez assigner/copier des valeurs primitives (chaînes, nombres, booléens) comme valeur entière. Jetez un œil à cet exemple:

Javascript primitive copy by value

let message = "Welcome to W3Docs!"; let phrase = message; console.log(phrase);

En conséquence, vous aurez deux variables indépendantes; chacune d'elles stockera la chaîne “Welcome to W3Docs!”.

Les objets ne fonctionnent pas comme ça.

Une variable stockera non l'objet mais son “adresse en mémoire”. En d'autres termes, elle ne stocke qu'une référence à celui-ci.

Par exemple:

Javascript object

let car = { name: "BMW" }; console.log(car);

Où se trouve l'objet dans la mémoire, et la variable car contains une référence à celle-ci. Chaque fois que vous copiez une variable d'objet, vous dupliquez la référence, mais l'objet n'est pas copié.

Par exemple:

Javascript copy an object variable by reference

let car = { name: "BMW" }; let sportCar = car; // copy the reference console.log(sportCar);

Comparaison par référence

En JavaScript, deux objets peuvent être considérés égaux uniquement s'ils sont le même objet.

Par exemple, deux variables sont égales lorsqu'elles se réfèrent au même objet:

Javascript objects comparing

let obj1 = {}; let obj2 = obj1; // copy the reference console.log(obj1 == obj2); // true, both variables reference the same object console.log(obj1 === obj2); // true

Dans le cas suivant, les deux objets indépendants ne peuvent pas être considérés comme égaux, même s'ils sont tous les deux vides:

Javascript objects comparing

let obj1 = {}; let obj2 = {}; // two independent objects console.log(obj1 == obj2); // false

Objet const

Un objet qui est proclamé const peut être modifié. Voici un exemple:

Javascript const objects

const car = { name: "BMW" }; car.model = "M5"; // (*) console.log(car.model); // M5

Vous pouvez penser que le (*) donnera une erreur, mais il n'y a pas d'erreur ici. Vous vous demanderez pourquoi. La raison est que const peut seulement fixer la valeur de car. Il ne provoquera une erreur qu'en essayant de fixer car à quelque chose d'autre comme ceci:

Javascript const objects

const car = { name: "BMW" }; // Error (can't reassign car) car = { name: "Mercedes" }; console.log(car);

Clone et fusion, Object.assign

Copier une variable objet signifie créer une autre référence au même objet.

Mais que faire lorsque vous avez besoin de doubler l'objet?

Bien sûr, vous pouvez le cloner, mais ce n'est pas une tâche facile, car JavaScript n'a pas de méthode intégrée. Ainsi, chaque fois que vous en avez besoin, créez un nouvel objet reproduisant sa structure et itérant sur les propriétés et copiez-les au niveau primitif. L'exemple est le suivant:

Javascript objects clone

La méthode Object.assign est également utilisée pour cela. Vous avez juste besoin d'utiliser la syntaxe suivante:

Object.assign(dest, [src1, src2, src3...])

Elle peut aussi être utilisée pour fusionner plusieurs objets:

Javascript objects merging

En JavaScript, les objets sont beaucoup plus puissants qu'il n'y paraît à première vue. C'est un vaste sujet, et vous en apprendrez plus à ce sujet dans les prochains chapitres.

Heure du Quiz : Testez Vos Compétences!

Prêt à relever le défi de ce que vous avez appris ? Plongez dans nos quiz interactifs pour approfondir votre compréhension et renforcer vos connaissances de manière ludique.