Object en JavaScript : organiser des données par paires clé-valeur

Un utilisateur, un produit, une réponse d'API : dès qu'une donnée a plusieurs caractéristiques nommées, c'est un objet. C'est la structure de base du langage, au point que les tableaux en sont eux-mêmes.

Sa syntaxe s'apprend en cinq minutes. Comprendre comment il se copie demande plus de temps, et explique une grande partie des bogues de données partagées.

Définition

Un Object est une collection non ordonnée de paires clé-valeur. La clé est une chaîne, la valeur peut être n'importe quoi : nombre, chaîne, tableau, fonction, autre objet.

const produit = { id: 1, titre: "Formation", prix: 49 };

console.log(produit.titre);      // "Formation"
console.log(produit["prix"]);    // 49, utile quand la clé est variable
console.log("prix" in produit);  // true

produit.stock = 12;              // ajoute une propriété
delete produit.prix;             // en retire une
console.log(produit);            // { id: 1, titre: "Formation", stock: 12 }

La notation par point couvre le cas courant. Les crochets deviennent nécessaires quand le nom de la clé est dans une variable, ou qu'il contient un espace. L'opérateur in teste la présence d'une clé, y compris quand sa valeur est undefined.

Les méthodes statiques utiles

Elles s'appellent sur Object lui-même, pas sur l'instance, et rendent un objet parcourable.

const produit = { titre: "Formation", prix: 49 };

console.log(Object.keys(produit));    // ["titre", "prix"]
console.log(Object.values(produit));  // ["Formation", 49]

const lignes = Object.entries(produit).map(([cle, valeur]) => cle + " = " + valeur);
console.log(lignes);  // ["titre = Formation", "prix = 49"]

Object.entries combiné à la Destructuration et à map est le moyen le plus direct de le parcourir.

Copie et référence

Comme un Array (tableau), un objet est manipulé par référence. Deux variables peuvent désigner le même objet, et modifier l'une modifie l'autre.

const base = { prix: 49, options: { tva: true } };

const copie = { ...base, prix: 59 };
console.log(base.prix);   // 49, l'original est intact

copie.options.tva = false;
console.log(base.options.tva);  // false : le sous-objet est partagé

Le Spread (...) produit une copie superficielle : le premier niveau est dupliqué, les objets imbriqués restent communs. Pour une copie complète, structuredClone(objet) fait le travail.

Questions fréquentes

Le plus lisible est de passer par Object.entries, qui renvoie un tableau exploitable avec map ou Array.forEach(). La boucle historique for...in existe encore mais parcourt aussi les propriétés héritées, ce qui produit des surprises sur des objets construits par une class.

Dès que les clés ne sont pas connues à l'avance, qu'elles ne sont pas des chaînes, ou que l'ordre d'insertion compte. Un Map accepte n'importe quel type de clé, expose une vraie taille et se parcourt directement. Un objet reste préférable pour une structure fixe, dont les clés font partie du code.

C'est un défaut présent dans la toute première version du langage, conservé depuis pour ne pas casser le code existant. Pour distinguer réellement un objet, il faut vérifier que la valeur n'est pas null en plus de tester typeof.