Un objet JavaScript, c'est un sac de valeurs nommées
Un tableau regroupe des valeurs par position. Un objet JavaScript, lui, les regroupe par nom. Dès que ce que tu modélises a des parties étiquetées — un utilisateur avec un nom et un âge, une requête avec une méthode et une URL — c'est l'objet qu'il te faut.
La façon la plus rapide d'en créer un, c'est l'objet littéral :
Chaque entrée est une paire clé: valeur. Sous le capot, les clés sont toujours des chaînes de caractères (les guillemets sont optionnels pour les identifiants valides comme name). Quant aux valeurs, ça peut être à peu près tout ce que JavaScript sait représenter : nombres, chaînes, booléens, tableaux, fonctions, et même d'autres objets.
Pas de souci pour la virgule finale après la dernière entrée. La plupart des équipes la laissent — ça garde les diffs propres quand on ajoute une nouvelle propriété plus tard.
Lire et écrire des propriétés d'un objet JavaScript
Il y a deux façons d'accéder à une propriété : la notation point et la notation crochets.
La notation pointée est plus lisible et c'est celle que tu utiliseras par défaut. La notation avec crochets prend tout son sens quand la clé est stockée dans une variable, ou quand elle n'est pas un identifiant valide :
Lire une propriété qui n'existe pas renvoie undefined — aucune erreur n'est levée :
Ce comportement peut masquer des fautes de frappe sans rien dire. Si tu veux que ça pète franchement, il faut faire la vérification toi-même.
Ajouter et supprimer des propriétés d'un objet JavaScript
Les objets JavaScript sont ouverts à tout moment — tu peux y ajouter des clés quand bon te semble :
Et pour les supprimer, on utilise delete :
delete fait partie de ces opérateurs qu'on n'utilise pas tous les jours, mais dès qu'il faut vraiment supprimer une clé (et pas juste lui affecter undefined), c'est l'outil adapté. Si on fait user.email = undefined, la clé reste présente — "email" in user renverrait toujours true.
Vérifier l'existence d'une propriété
Trois façons de faire, avec chacune une nuance :
invérifie si la clé existe, y compris celles héritées via la chaîne de prototypes.Object.hasOwn(obj, key)ne regarde que les clés propres à l'objet. Pratique quand on veut ignorer tout ce qui vient de l'héritage. C'est le remplaçant moderne de l'ancienhasOwnProperty.obj.key !== undefinedfonctionne dans la majorité des cas, mais te ment dès qu'une propriété vaut explicitementundefined.
Dans le doute, pars sur Object.hasOwn : c'est presque toujours ce que tu veux vraiment tester.
Les méthodes : des fonctions portées par l'objet
Quand la valeur d'une propriété est une fonction, on parle de méthode. JavaScript propose une syntaxe raccourcie pour les déclarer directement dans un littéral d'objet :
this, à l'intérieur d'une méthode, fait référence à l'objet sur lequel la méthode a été appelée — ici, c'est user. C'est comme ça que greet sait quel prénom utiliser.
Un point à surveiller : les fonctions fléchées n'ont pas leur propre this. Elles sont donc à éviter pour les méthodes qui doivent accéder aux autres propriétés de l'objet :
Privilégiez la syntaxe courte pour les méthodes (greet() { ... }) dès que vous manipulez this. Les fonctions fléchées sont parfaites pour les callbacks, mais pas pour les méthodes d'objet.
Objets imbriqués en JavaScript
Une valeur peut très bien être elle-même un objet, et ainsi de suite sur plusieurs niveaux :
Pour lire une propriété imbriquée, on enchaîne les accès — user.address.city. Le piège : si l'un des maillons de la chaîne vaut null ou undefined, tu récoltes une TypeError :
console.log(user.profile.city);
// TypeError: Cannot read properties of undefined (reading 'city')
L'optional chaining (user.profile?.city) est la solution moderne : au lieu de lever une erreur quand un maillon manque, ça renvoie simplement undefined. Une page entière y est consacrée plus loin dans ce chapitre.
Parcourir un objet JavaScript
Pour parcourir toutes les clés d'un objet, le trio Object.keys, Object.values et Object.entries est exactement ce qu'il vous faut :
Object.entries est la plus pratique : elle te donne la clé et la valeur d'un coup, et ça se marie très bien avec le destructuring de tableau.
Il existe aussi la boucle for...in, mais elle parcourt aussi les propriétés héritées, ce qui n'est généralement pas ce que tu veux :
for (const key in scores) {
console.log(key); // fonctionne, mais inclut les clés héritées
}
Privilégiez Object.keys / Object.entries, sauf si vous avez vraiment besoin de récupérer aussi les propriétés héritées.
Quelques raccourcis de syntaxe à connaître
Voici deux sucres syntaxiques que vous allez croiser partout :
Le raccourci de propriété (property shorthand) s'active quand le nom de la variable est identique à celui de la clé. Les clés calculées (la forme [expr]) permettent de construire des noms de propriétés à la volée — bien pratique quand on écrit une fonction qui met à jour un champ passé en paramètre.
L'égalité entre objets se fait par référence
Voilà un piège dans lequel tout le monde tombe au moins une fois :
=== sur des objets vérifie si les deux côtés pointent vers le même objet en mémoire, pas s'ils ont le même contenu. Deux objets avec des propriétés identiques restent deux objets distincts.
Pour répondre à la question « est-ce qu'ils ont la même forme ? », il faut comparer les champs à la main, ou passer par un utilitaire de comparaison profonde (deep equality). JSON.stringify(a) === JSON.stringify(b) est un bricolage rapide qui marche sur des données simples, mais qui flanche dès qu'il y a des fonctions, des undefined ou des références circulaires.
Les objets JavaScript restent mutables, même avec const
const verrouille la variable sur une seule valeur. En revanche, il ne gèle pas l'objet vers lequel cette valeur pointe :
Si tu veux vraiment de l'immutabilité, Object.freeze(user) bloque toute modification ultérieure (de façon superficielle uniquement — les objets imbriqués restent modifiables). En pratique, la plupart du temps on s'appuie sur une convention plutôt que sur Object.freeze : on considère les objets déclarés avec const comme « ne réassigne pas cette variable » et l'immutabilité se gère au niveau de la conception.
La suite : les tableaux
Les objets et les tableaux sont les deux briques à partir desquelles tout le reste se construit. Les objets servent à manipuler des données étiquetées, les tableaux des données ordonnées. Au programme ensuite : le fonctionnement des tableaux JavaScript et la poignée de méthodes (push, slice, map et compagnie) qui font l'essentiel du boulot.
Questions fréquentes
Comment créer un objet en JavaScript ?
La façon la plus courante, c'est le littéral d'objet : const user = { name: 'Ada', age: 30 }. Les accolades contiennent des paires clé-valeur séparées par des virgules. Les clés sont des chaînes (les guillemets sont facultatifs si c'est un identifiant valide), et les valeurs peuvent être de n'importe quel type : nombres, chaînes, tableaux, fonctions ou même d'autres objets.
Quelle est la différence entre la notation point et la notation crochets ?
user.name et user['name'] font exactement la même chose quand la clé est un identifiant connu à l'avance. On passe aux crochets quand la clé est stockée dans une variable (user[key]), qu'elle contient des caractères que le point ne sait pas lire (espaces, tirets) ou qu'elle commence par un chiffre. Pour tout le reste, la notation point est plus propre.
Comment vérifier si une propriété existe sur un objet ?
'name' in user vérifie la présence de la clé, y compris celles héritées du prototype. Object.hasOwn(user, 'name') ne regarde que les propriétés propres à l'objet — c'est le remplaçant moderne de hasOwnProperty. Tester user.name !== undefined marche aussi, mais ça ment si la propriété vaut explicitement undefined.
Comment parcourir un objet en JavaScript ?
for (const key in obj) itère sur les clés, y compris celles héritées. En pratique, on utilise plutôt Object.keys(obj), Object.values(obj) ou Object.entries(obj) combinés à une boucle for...of ou à .forEach(). Object.entries est particulièrement pratique quand on a besoin de la clé et de la valeur en même temps.
