Faire un deep clone d’un objet en JavaScript

Pendant longtemps, cloner un objet profondément en JavaScript était un vrai casse-tête.

Car vous le savez sûrement, en JavaScript les objets sont toujours considérés comme des références, ce qui pose quelques problèmes lorsqu’on doit les copier entièrement !

Auparavant, on utilisait des astuces comme JSON.parse(JSON.stringify(obj)), ou des bibliothèques externes telles que Lodash (_.cloneDeep).

Mais ces solutions avaient leurs limites : perte des dates, fonctions supprimées, erreurs avec certains types de données…

Heureusement, depuis Node.js 17 et les navigateurs modernes, JavaScript propose enfin une méthode native : structuredClone()

Qu’est-ce que structuredClone ?

C’est simplement est une fonction intégrée qui permet de créer une copie profonde d’un objet.

Contrairement à un simple spread operator ({...obj}) ou à Object.assign(), qui ne réalisent qu’une copie superficielle, structuredClone traverse toute la structure et copie également les objets imbriqués :

const user = {
  name: "Alice",
  settings: {
    theme: "dark",
    language: "fr"
  }
};

const clone = structuredClone(user);

clone.settings.theme = "light";

console.log(user.settings.theme); // "dark"
console.log(clone.settings.theme); // "light"

Consultez la documentation officielle directement sur MDN : https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone

À noter que la compatibilité caniuse.com est à 93,61%

Quels types de données sont supportés ?

Bonne nouvelle : structuredClone supporte la plupart des types de données modernes, comme :

• Les objets simples
• Les tableaux
• Les Map et Set
• Les Date
• Les ArrayBuffer, TypedArray, Blob, File, ImageBitmap…

En revanche, certaines choses ne sont pas clonables : les fonctions, les références DOM ou encore les symboles. Si vous essayez, une erreur sera levée.

Conclusion

Grâce à structuredClone(), on a enfin une méthode native et performante pour effectuer un deep clone.

Mais attention : tout n’est pas clonable. Dans les cas où vos objets contiennent des fonctions ou des références DOM, un petit nettoyage en amont est nécessaire.