Itération sur les objets en JavaScript : analyse complète pour débutants

Comment parcourir les propriétés d'un objet en JavaScript : du débutant au pro

Chaque développeur qui écrit en JavaScript se retrouve tôt ou tard confronté à la question : « Comment parcourir toutes les propriétés d'un objet ? ». Si vous avez l'habitude de travailler avec des tableaux, où il y a for, forEach et map, les objets peuvent sembler récalcitrants. Mais ne vous inquiétez pas ! Dans cet article, nous allons passer en revue toutes les méthodes d'itération sur un objet en JavaScript — du classique for...in aux modernes Object.keys(), Object.values() et Object.entries().

Nous ne montrerons pas simplement la syntaxe. Nous analyserons quelle méthode choisir pour une tâche spécifique, quels pièges existent, et comment éviter les problèmes avec les propriétés héritées. C'est parti !

Qu'est-ce qu'un objet en JavaScript et pourquoi faut-il l'itérer ?

Un objet est une collection de paires « clé : valeur ». Contrairement à un tableau, où les éléments sont ordonnés par index, dans un objet l'ordre des propriétés n'est pas garanti (bien que les moteurs modernes essaient de le conserver).

Imaginez que vous ayez un objet avec les données d'un utilisateur :

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moscou',\n  isAdmin: false\n};

Vous devez afficher toutes les données à l'écran, les envoyer au serveur ou simplement faire un calcul. Sans itération, il faudrait écrire user.name, user.age, etc. — ce n'est pas flexible et ne passe pas à l'échelle. Et si l'objet a 50 propriétés ? C'est là que les méthodes d'itération deviennent utiles.

Méthode n°1 : Le classique for...in

La méthode la plus ancienne et la plus directe pour parcourir les propriétés d'un objet est d'utiliser la boucle for...in. Elle a été créée spécialement pour les objets.

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moscou'\n};\n\nfor (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// Affichage :\n// name: Anna\n// age: 28\n// city: Moscou

Ici, key est le nom de la propriété (valeur de type chaîne), et user[key] est sa valeur.

Important ! for...in parcourt non seulement les propriétés propres de l'objet, mais aussi celles héritées via la chaîne de prototypes. Cela peut entraîner des résultats inattendus, surtout si vous avez étendu les prototypes d'objets natifs (ce qu'il ne faut pas faire, mais on ne sait jamais).

Pour éviter cela, utilisez la méthode hasOwnProperty :

for (let key in user) {\n  if (user.hasOwnProperty(key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

Une alternative moderne est Object.hasOwn() (ES2022) :

for (let key in user) {\n  if (Object.hasOwn(user, key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

Quand utiliser for...in ? Lorsque vous avez besoin des noms de propriétés (clés) et que vous êtes sûr de ne pas rencontrer de propriétés héritées. Ou lorsque vous travaillez avec des objets simples créés par le littéral {}.

Méthode n°2 : Object.keys() — obtenir un tableau de clés

La méthode Object.keys() retourne un tableau des propriétés propres (non héritées) énumérables de l'objet. C'est la méthode d'itération la plus populaire et la plus sûre à ce jour.

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moscou'\n};\n\nconst keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city']\n\n// On peut maintenant utiliser forEach ou for...of\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

Avantage : vous obtenez un tableau ordinaire avec lequel vous pouvez faire tout ce que vous voulez — filtrer, mapper, trier.

Exemple avec filtrage :

const filteredKeys = Object.keys(user).filter(key => key !== 'isAdmin');\nfilteredKeys.forEach(key => console.log(user[key]));

Quand utiliser Object.keys() ? Pratiquement tou