5.9 Cloner un objet

Dans la vidéo précédente, nous avons vu comment énumérer les propriétés d'un objet. Cette technique permet directement de cloner un objet : il suffit de copier chaque propriété dans un nouvel objet vide. Mais il existe des approches plus modernes et plus élégantes.

L'approche classique avec for...in

On part d'un objet vide et on copie une à une les propriétés. La notation entre crochets est ici indispensable, puisqu'on ne connaît pas les noms de clés à l'avance.

const another = {};
							for (let key in circle) {
							  another[key] = circle[key];
							}

Ça fonctionne, mais c'est verbeux. JavaScript moderne propose mieux.

Object.assign

La méthode Object.assign prend un objet cible en premier argument, puis un ou plusieurs objets source. Elle copie toutes les propriétés des sources vers la cible et renvoie la cible. Cible vide = clone pur. Cible déjà peuplée = fusion.

const another = Object.assign({}, circle);
							const merged = Object.assign({ color: 'yellow' }, circle);

L'opérateur de décomposition (spread)

Encore plus court : l'opérateur ... appliqué à un objet déploie ses propriétés à l'emplacement où il est écrit. C'est la syntaxe la plus moderne et la plus lisible.

const another = { ...circle };
							const enriched = { color: 'yellow', ...circle };

Tous ces patterns produisent une copie de surface (shallow copy). Les propriétés primitives sont copiées par valeur, mais les propriétés imbriquées qui sont elles-mêmes des objets restent partagées par référence. Pour un clone profond, il faut une approche dédiée (récursion ou structuredClone moderne).

Retenez : Object.assign et l'opérateur spread sont vos outils quotidiens pour copier ou fusionner des objets, et le spread l'emporte en concision dans la plupart des cas.