Un objet JavaScript est un container pour un ensemble de variables auxquelles on peut accéder via l’objet, les variables d’un objet, c’est ce qu’on appelle des propriétés.
Pour définir un objet, on utilise des crochets.
var monObjet = {};
Des définir des propriétés dans cet objet, on sépare le nom de la variable (la clé) de la valeur en utilisant deux-points: :.
Pour définir plusieurs propriétés, on les sépare par une virgule: ,.
var monObject = {
key1: "value1",
key2: "value2"
};
Une clé est unique par objet. Si une clé est redéfinie, alors elle écrase l’ancienne.
var monObjet = {
key1: "value1",
key2: "value2",
key1: "value3"
}
console.log(monObjet); // { key1: "value3", key2: "value2" }
La clé doit obligatoirement être entourée de quotes si elle ne respecte pas les conventions de nommage d’une variable (nombres, lettres et underscore) — si elle contient des espaces par exemple. Elles sont optionnelles sinon.
var info = {
"full name": "Firstname Lastname",
email : "bob@exemple.com"
};
Les objets permettent de structurer nos données de manière intuitive. Plusieurs types de données peuvent être utilisés au sein d’un même objet, et on peut notamment imbriquer des objets et des fonctions.
var info = {
name : {
first: "Firstname",
last : "Lastname"
},
email : "bob@exemple.com",
isActive : true,
getFullName : function() {
return this.name.first + " " + this.name.last;
}
};
On peut ommetre la clé de la propriété lorsqu’on crée une propriété à partir d’une valeur [ES6].
Le nom de la propriété sera égal au nom de la variable, et la valeur de la propriété à la valeur de la variable.
Version normale:
var a = 'foo',
b = 'bar';
var obj = {
a: a,
b: b
}; // {a: 'foo', b: 'bar'}
Version abrégée:
var obj = {a, b}; // {a: 'foo', b: 'bar'}
On peut ommetre le mot-clé function pour déclarer une fonction [ES6].
Version normale:
var obj = {
sayHello: function() {
return "Hello";
}
};
Version abrégée:
var obj = {
sayHello() {
return "Hello";
}
};
Des noms de propriétés dynamiques peuvent être utilisées lors de la création d’objets [ES6]
const obj = {
prop_0 : 1,
['prop_' + 42]: 42
}
console.log(obj.prop_0);
console.log(obj.prop_42);
Pour accéder à la valeur d’une propriété, on utilise des crochets:
console.log(info["email"]); // bob@exemple.com
console.log(info["full name"]); // Firstname Lastname
var myvar = "email";
console.log(info[myvar]); // bob@exemple.com
On peut utiliser la notation abrégée, avec un point (dot notation), lorsque la clé respecte les conventions de nommage d’une variable:
console.log(info.email); // bob@exemple.com
L’accès aux valeurs d’un objet est constant. Qu’on accède à la valeur d’un objet qui possède 5 propriétés ou 1 000 000, le temps d’accès reste le même. Ce n’est pas le cas pour les tableaux, ce qui rend les objets particulièrement intéressant.
En JavaScript tout est objet dans une certaine mesure. C’est à dire que tous les types de données sont constitués de clé/valeur, même les chaînes de caractères. Ainsi pour récupérer la longueur d’une chaîne de caractère, on récupère la valeur de length:
console.log("Hello World".length);
On peut ajouter ou modifier la valeur d’une propriété directement:
info.telephone = "0440404040";
Pour supprimer une propriété, on utilise le mot-clé delete
delete someObject.someKey;
On peut utiliser for .. in pour boucler sur les propriétés d’un objet.
for(k in someObject) {
if(someObject.hasOwnProperty(k)) {
console.log(k + ' = ' + someObject[k]);
}
}
Les clés ne sont pas ordonnées, on ne peut pas être certain de les récupérer dans l’ordre dans lesquelles elles sont écrites. Si l’ordre est important, il est nécessaire d’utiliser un tableau — comme ci-dessous:
var links = [
{"twitter" : "twitter.com"},
{"facebook" : "facebook.com"},
{"youtube" : "youtube.com"}
];
Les valeurs composées (objets, tableaux et fonctions) sont toujours passées par référence, leur contenu n’est pas dupliqué en mémoire: si on affecte un objet à une deuxième variable, les deux variables utilisent le même emplacement mémoire. En modifiant une référence, on modifie également l’originale.
Exemple:
var obj = {name: "Bob"},
obj2 = obj;
obj.name = "Alice";
console.log("obj:", obj); // { name: "Alice" }
console.log("obj2:", obj2); // { name: "Alice" }
Pour éviter ça:
Pour créer deux valeurs indépendantes, il est nécessaire de créer explicitement une copie de la variable.
var obj = {name: "Bob"},
obj2 = Object.assign({}, obj);
obj.name = "Alice";
console.log("obj:", obj); // { name: "Alice" }
console.log("obj2:", obj2); // { name: "Bob" }