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.

En résumé

Cette leçon explique comment cloner (copier) un objet en JavaScript. Le transcript couvre trois approches : la boucle for...in pour copier manuellement chaque propriété dans un nouvel objet, la méthode Object.assign() qui fusionne les propriétés d'un ou plusieurs objets sources dans un objet cible, et l'opérateur spread (...) qui est présenté comme la méthode la plus simple et élégante du JavaScript moderne pour cloner un objet.

Points clés

• La boucle for...in énumère toutes les propriétés d'un objet et permet de les copier une par une dans un nouvel objet en utilisant la notation entre crochets
• Object.assign() prend un objet cible (pouvant être vide ou existant) et un ou plusieurs objets sources, puis copie toutes leurs propriétés et méthodes dans l'objet cible
• L'opérateur spread (...) est la méthode la plus simple et élégante pour cloner un objet en JavaScript moderne : il étale toutes les propriétés et méthodes dans les nouvelles accolades
• Object.assign() permet également de fusionner plusieurs objets en un seul en passant plusieurs objets sources
• Ces trois méthodes copient à la fois les propriétés et les méthodes de l'objet original

Questions fréquentes

Qu'est-ce qu'un clone d'objet et pourquoi en aurait-on besoin ?

Un clone d'objet est une copie complète d'un objet avec toutes ses propriétés et méthodes reproduites dans un nouvel objet. On en a besoin pour créer des copies indépendantes sans modifier l'objet original.

Quelle est la différence entre Object.assign() et l'opérateur spread pour cloner ?

Object.assign() peut fusionner plusieurs objets sources dans un objet cible existant, tandis que l'opérateur spread (...) est plus simple et élégant pour créer directement un nouvel objet cloné en une seule ligne.

L'objet cible dans Object.assign() doit-il être vide ?

Non, l'objet cible peut être vide ou existant avec ses propres propriétés. Les propriétés de l'objet source seront ajoutées ou fusionnées avec les propriétés existantes de l'objet cible.