5.8 Enumération des propriétés d'un objet

Dans cette vidéo, on s'intéresse aux différentes façons d'énumérer les membres d'un objet en JavaScript. La technique de base est la boucle for...in, qui itère sur chaque clé de l'objet.

La boucle for...in

À chaque itération, la variable de boucle reçoit le nom (la clé) d'une propriété. On accède à la valeur correspondante via la notation entre crochets, car le nom est stocké dans une variable.

const circle = {
							  radius: 1,
							  draw() { console.log('draw'); }
							};
							
							for (let key in circle) {
							  console.log(key, circle[key]);
							}

Cette approche énumère aussi bien les propriétés que les méthodes — tout ce qui est enumerable sur l'objet.

Tester l'existence d'une propriété : l'opérateur in

Pour vérifier si une clé existe sur un objet, on utilise l'opérateur in. Il renvoie true ou false.

if ('radius' in circle) {
							  console.log('radius existe');
							}

Les méthodes Object.keys, values et entries

JavaScript moderne offre des approches plus élégantes que for...in. Object.keys(obj) renvoie un tableau de toutes les clés. Object.values(obj) renvoie un tableau des valeurs. Object.entries(obj) renvoie un tableau de paires [clé, valeur], ce qui permet une itération propre avec for...of et la déstructuration.

for (const [key, value] of Object.entries(circle)) {
							  console.log(key, value);
							}

Cette dernière forme est souvent la plus lisible pour itérer sur un objet en récupérant à la fois la clé et la valeur. C'est aussi celle que vous croiserez le plus dans le code JavaScript moderne.

En résumé

Cette leçon couvre l'énumération des propriétés d'un objet JavaScript et ses applications pratiques pour cloner et fusionner des objets. Trois approches sont présentées : la boucle for...in pour parcourir manuellement les propriétés, la méthode Object.assign() pour copier les propriétés d'objets sources vers un objet cible, et l'opérateur spread (...) pour une approche plus moderne et élégante. Chaque méthode offre une flexibilité croissante et un code de plus en plus concis.

Points clés

• La boucle for...in énumère toutes les propriétés d'un objet et permet d'y accéder via la notation entre crochets
• Object.assign() copie les propriétés d'un ou plusieurs objets sources vers un objet cible, potentiellement vide
• L'opérateur spread (...) est la méthode moderne la plus simple et élégante pour cloner un objet en JavaScript
• Object.assign() permet de combiner plusieurs objets en un seul tout en préservant les propriétés initiales de l'objet cible
• L'objet cible passé à Object.assign() peut contenir des propriétés ou méthodes préexistantes qui seront conservées

Questions fréquentes

Quelle est la différence entre for...in, Object.assign() et l'opérateur spread ?

for...in est la méthode manuelle basique pour énumérer; Object.assign() est plus réutilisable et accepte plusieurs sources; l'opérateur spread (...) est la plus moderne, simple et élégante pour cloner en une seule ligne.

Comment cloner un objet en JavaScript ?

Trois façons : 1) boucle for...in pour copier manuellement chaque propriété, 2) Object.assign() qui copie automatiquement, 3) opérateur spread qui place toutes les propriétés dans un nouvel objet via la syntaxe {...objet}.

Peut-on combiner plusieurs objets avec Object.assign() ?

Oui, Object.assign() accepte un objet cible suivi d'un ou plusieurs objets sources, fusionnant toutes leurs propriétés dans l'objet cible.