Copie profonde d'objets JavaScript : top 5 méthodes

Introduction : Pourquoi une simple copie ne suffit-elle pas ?

Imaginez : vous développez une application qui gère une configuration utilisateur complexe. Vous écrivez const newConfig = oldConfig, modifiez quelques champs — et soudain, l'objet d'origine est également modifié. Une douleur familière, n'est-ce pas ? 👋

En JavaScript, les objets sont transmis par référence. Cela signifie qu'une simple affectation ne crée pas un nouvel objet, mais copie uniquement le pointeur vers l'ancien. D'où la question qui hante des milliers de développeurs sur Stack Overflow : "What is the most efficient way to deep clone an object in JavaScript?".

Dans cet article, nous allons passer en revue toutes les méthodes populaires de copie profonde, leurs avantages, leurs inconvénients et leurs performances. Vous découvrirez quelle méthode choisir en 2024 et apprendrez à écrire votre propre fonction de deep clone fiable.

Pourquoi parlons-nous de copie profonde ?

La copie profonde (deep clone) crée une copie totalement indépendante d'un objet, y compris toutes ses structures imbriquées. Contrairement à la copie superficielle (shallow copy), où les objets imbriqués restent partagés.

Voici un scénario typique où cela est nécessaire :

\n
• Travailler avec Redux / Zustand : il ne faut pas muter l'état, mais créer des copies.
\n
• Sérialisation de données pour envoi au serveur.
\n
• Gestion du cache ou de configurations immuables.
\n
• Tests unitaires : pour ne pas affecter les données d'origine.
\n

Mais attention, ce n'est pas si simple. Si vous essayez de copier un objet contenant des fonctions, des valeurs undefined, des Symbol ou des références circulaires — de nombreuses méthodes échoueront ou perdront des données. Analysons chaque méthode en détail.

Méthode 1 : JSON.parse(JSON.stringify(obj)) — ancienne mais fonctionnelle

C'est la méthode la plus populaire chez les débutants. Elle est simple et rapide à écrire :

const original = {\n    name: "Anna",\n    age: 25,\n    address: { city: "Paris", zip: 75000 },\n    hobbies: ["lecture", "course à pied"]\n};\n\nconst clone = JSON.parse(JSON.stringify(original));\n\nclone.address.city = "Lyon";\nconsole.log(original.address.city); // "Paris" — ✅ la copie est indépendante !\n

Avantages :

\n
• 🔥 Syntaxe très simple.
\n
• 🔥 Fonctionne pour la plupart des cas simples.
\n

Inconvénients (critiques !) :

\n
• ❌ Perd les fonctions — elles deviennent undefined.
\n
• ❌ Perd les valeurs undefined — les champs avec undefined disparaissent.
\n
• ❌ Perd les Symbol — les clés de type Symbol sont supprimées.
\n
• ❌ Ne gère pas les références circulaires — lève une erreur TypeError.
\n
• ❌ Problèmes avec les dates — Date est convertie en chaîne de caractères.
\n
• ❌ Problèmes avec Map, Set, RegExp — ils deviennent des objets vides.
\n

Conclusion : Convient uniquement aux données garanties sérialisables en JSON (chaînes, nombres, tableaux, objets simples).

Méthode 2 : Structured Clone API — le standard moderne (2024)

Depuis 2022, JavaScript dispose d'une méthode native de copie profonde — structuredClone. Elle est disponible dans tous les navigateurs modernes et Node.js 17+.

const clone = structuredClone(original);\n\nclone.address.city = "Toulouse";\nconsole.log(original.address.city); // "Paris" — ✅\n

Ce que structuredClone peut gérer :

\n
• ✅ Références circulaires — fonctionne !
\n
• ✅ Dates — conserve le type Date.
\n
• ✅ Map et Set — copie correctement.
\n
• ✅ RegExp — fonctionne aussi.
\n
• ✅ ArrayBuffer et Ty