Les objets en JavaScript : créer, lire, modifier, parcourir et supprimer des propriétés

Au chapitre précédent, les fonctions nous ont permis de regrouper des instructions. Les objets regroupent des données : un utilisateur, un produit, une réponse d’API sont des objets. C’est la structure que vous manipulerez le plus en JavaScript, et ce chapitre en fait le tour complet, de la création à la copie.

Qu’est-ce qu’un objet en JavaScript ?

Un objet est un ensemble de propriétés, chacune formée d’une clé (un nom) et d’une valeur. La valeur peut être de n’importe quel type : chaîne, nombre, booléen, tableau, un autre objet, ou une fonction. Si vous connaissez les dictionnaires de Python ou les tableaux associatifs de PHP, l’idée est la même.

const personne = {
  nom: 'Jean',
  age: 30,
  ville: 'Lille',
  actif: true,
  langues: ['français', 'anglais'],
};

Les accolades délimitent l’objet, chaque propriété s’écrit clé: valeur, les propriétés sont séparées par des virgules. La virgule finale après la dernière propriété est autorisée et facilite les ajouts.

Créer un objet

La notation littérale

C’est celle de l’exemple ci-dessus, et c’est la forme à utiliser dans la grande majorité des cas. Un objet vide s’écrit {}, et on peut le remplir ensuite :

const telephone = {};
telephone.marque = 'Sony';
telephone.prix = 400;
telephone.stock = 200;

console.log(telephone); // { marque: 'Sony', prix: 400, stock: 200 }

Une fonction constructeur

Quand il faut créer plusieurs objets de même forme, une fonction appelée avec new les fabrique. À l’intérieur, this désigne l’objet en cours de création.

function Telephone(marque, prix, stock) {
  this.marque = marque;
  this.prix = prix;
  this.stock = stock;
  this.enStock = function () {
    return this.stock > 0;
  };
}

const motoZ = new Telephone('Motorola', 400, 200);
const miMax = new Telephone('Xiaomi', 200, 0);

console.log(motoZ.enStock()); // true
console.log(miMax.enStock()); // false

Cette écriture est l’ancêtre des classes, que vous verrez plus tard : class Telephone { constructor(marque, prix, stock) { … } } fait la même chose avec une syntaxe plus claire. Vous rencontrerez encore des fonctions constructeur dans du code existant.

Enfin, new Object() crée aussi un objet vide, mais n’apporte rien de plus que {} : on ne l’utilise plus.

Lire une propriété

Deux syntaxes, équivalentes dans le cas simple :

console.log(personne.nom);     // 'Jean'   : notation par point
console.log(personne['nom']);  // 'Jean'   : notation par crochets

Les crochets deviennent indispensables dans deux situations : quand la clé est dans une variable, et quand elle contient des caractères impossibles après un point.

const cle = 'age';
console.log(personne[cle]);            // 30 : la clé vient d'une variable

const fiche = { 'prénom complet': 'Jean Dupont' };
console.log(fiche['prénom complet']);  // 'Jean Dupont' : espace dans la clé

Lire une propriété qui n’existe pas ne provoque pas d’erreur : le résultat est undefined.

console.log(personne.pays);   // undefined

En revanche, lire une propriété d’une propriété absente plante : personne.adresse.ville lève « Cannot read properties of undefined ». Le chaînage optionnel ?. évite l’erreur :

console.log(personne.adresse?.ville);   // undefined, sans erreur

Modifier et ajouter

La même affectation modifie une propriété existante ou en crée une nouvelle :

personne.age = 31;            // modification
personne.pays = 'France';     // ajout : la propriété n'existait pas
personne['ville'] = 'Lyon';   // modification, notation par crochets

console.log(personne.age, personne.pays, personne.ville);   // 31 'France' 'Lyon'

Attention à const : il empêche de réaffecter la variable personne à un autre objet, pas de modifier l’objet lui-même. C’est voulu et c’est pratique. Pour interdire toute modification, Object.freeze(personne) gèle l’objet (les affectations sont alors ignorées en mode non strict, refusées en mode strict).

Supprimer une propriété et tester son existence

delete personne.pays;

console.log(personne.pays);                 // undefined
console.log('pays' in personne);            // false : la clé n'existe plus
console.log(Object.hasOwn(personne, 'nom')); // true  : la clé existe, propre à l'objet

delete retire la propriété. Pour vérifier la présence d’une clé, préférez in ou Object.hasOwn() à un test sur undefined : une propriété peut exister avec la valeur undefined.

Les méthodes : des fonctions dans un objet

Une propriété dont la valeur est une fonction s’appelle une méthode. Dans une méthode, this désigne l’objet qui la contient.

const personne = {
  nom: 'Ana',
  naissance: 1996,
  saluer() {
    return `Salut, je suis ${this.nom}`;
  },
  age() {
    return 2026 - this.naissance;
  },
};

console.log(personne.saluer()); // 'Salut, je suis Ana'
console.log(personne.age());    // 30

Parcourir un objet

Trois méthodes statiques renvoient le contenu d’un objet sous forme de tableau, ce qui permet d’utiliser tout ce que vous savez des boucles :

const produit = { nom: 'Clavier', prix: 49.9, stock: 12 };

console.log(Object.keys(produit));    // ['nom', 'prix', 'stock']
console.log(Object.values(produit));  // ['Clavier', 49.9, 12]
console.log(Object.entries(produit)); // [['nom', 'Clavier'], ['prix', 49.9], ['stock', 12]]

for (const [cle, valeur] of Object.entries(produit)) {
  console.log(`${cle} : ${valeur}`);
}
// nom : Clavier
// prix : 49.9
// stock : 12

console.log(Object.keys(produit).length);   // 3 : le « nombre de propriétés »

La boucle for…in existe aussi et parcourt les clés directement. Elle remonte cependant les propriétés héritées du prototype, ce qui surprend dès qu’on manipule des objets créés par des bibliothèques : Object.keys() avec for…of est le choix par défaut.

for (const cle in produit) {
  console.log(cle);   // nom, prix, stock
}

L’opération inverse, reconstruire un objet à partir de paires, se fait avec Object.fromEntries() :

Object.fromEntries([['a', 1], ['b', 2]]);   // { a: 1, b: 2 }

Objets imbriqués et tableaux d’objets

Une valeur peut être un objet : c’est ainsi qu’on représente une structure. Et un tableau d’objets est la forme la plus courante des données venues d’une API.

const commande = {
  numero: 1042,
  client: {
    nom: 'Jean',
    adresse: { ville: 'Lille', codePostal: '59000' },
  },
  lignes: [
    { produit: 'Clavier', prix: 49.9, quantite: 1 },
    { produit: 'Souris', prix: 19.5, quantite: 2 },
  ],
};

console.log(commande.client.adresse.ville);   // 'Lille'
console.log(commande.lignes[1].produit);      // 'Souris'

let total = 0;
for (const ligne of commande.lignes) {
  total += ligne.prix * ligne.quantite;
}
console.log(total);   // 88.9

Les données d’un serveur arrivent sous forme de texte JSON, dont la syntaxe est celle des objets littéraux : JSON.parse(texte) le transforme en objet, JSON.stringify(objet) fait l’inverse.

Copier un objet sans surprise

Affecter un objet à une autre variable ne le copie pas : les deux variables pointent vers le même objet en mémoire.

const original = { nom: 'Jean', adresse: { ville: 'Paris' } };

const alias = original;
alias.nom = 'Paul';
console.log(original.nom);   // 'Paul' : ce n'était pas une copie

L’opérateur de décomposition copie le premier niveau, mais les objets imbriqués restent partagés :

const copie = { ...original };
copie.nom = 'Marie';
copie.adresse.ville = 'Lyon';

console.log(original.nom);            // 'Paul'  : le premier niveau est bien copié
console.log(original.adresse.ville);  // 'Lyon'  : l'objet imbriqué est partagé

Pour une copie complète, indépendante à tous les niveaux, structuredClone() est la fonction prévue :

const clone = structuredClone(original);
clone.adresse.ville = 'Nice';

console.log(original.adresse.ville);  // 'Lyon' : l'original n'a pas bougé

structuredClone ne copie pas les méthodes : réservez-la aux objets de données. Enfin, Object.assign(cible, source) fusionne des objets, avec la même copie superficielle que la décomposition.

Récapitulatif

Vers la programmation orientée objet

Quand plusieurs objets partagent la même forme et les mêmes méthodes, on les décrit une fois dans une classe et on en crée des instances avec new. C’est la suite naturelle de ce chapitre : Les classes en JavaScript et Introduction aux classes et aux objets (ES6). Pour l’instant, le chapitre suivant présente un objet fourni par le langage, Math, et ses méthodes.