• Qu'est-ce que structuredClone() ?

  • structuréClone() est une fonction globale introduite en 2022 qui permet le clonage en profondeur d'objets JavaScript. Contrairement aux méthodes traditionnelles comme JSON.stringify() et JSON.parse(), qui ont du mal à gérer des structures complexes et des références circulaires, structuredClone() gère ces défis sans effort.

• Pourquoi cela change-t-il la donne ?

  • C'est un outil robuste pour créer de véritables clones profonds, préservant l'intégrité des objets imbriqués et des références circulaires sans avoir besoin de logique ou de solutions de contournement supplémentaires. De plus, il est disponible dans les environnements modernes, y compris les Web Workers.

1. Clonage d'objet simple : les bases

• Utilisation de {...obj} (copie superficielle)

  const original = { name: "Alice", details: { age: 25 } };
  const shallowCopy = { ...original };

  shallowCopy.details.age = 30;

  console.log(original.details.age); // 30
  console.log(shallowCopy.details.age); // 30

• Ce qui se passe?

  • L'opérateur de propagation {...obj} crée uniquement une copie superficielle. L'objet détails n'est pas profondément cloné, donc les modifications apportées à ShallowCopy.details affectent également les détails d'origine.
  • Utilisation de JSON.stringify() JSON.parse() (copie approfondie)

  const original = { name: "Alice", details: { age: 25 } };
  const deepCopy = JSON.parse(JSON.stringify(original));

  deepCopy.details.age = 30;

  console.log(original.details.age); // 25
  console.log(deepCopy.details.age); // 30

• Ce qui se passe?

  • Cette méthode crée une copie complète, mais elle a des limites : elle ne peut pas gérer les fonctions, les références non définies ou circulaires.
  • Utilisation de structuredClone() (copie approfondie)

  const original = { name: "Alice", details: { age: 25 } };
  const clone = structuredClone(original);

  clone.details.age = 30;

  console.log(original.details.age); // 25
  console.log(clone.details.age); // 30

• Ce qui se passe?
  • structuréClone() crée un clone profond, préservant la structure sans aucune des limitations de JSON.stringify() et gérant des types de données complexes comme les références circulaires et non définies.

2. Gestion des références circulaires : un défi

• Référence circulaire avec {...obj}

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• Ce qui se passe?

  • {...obj} ne peut pas gérer les références circulaires, ce qui entraîne une erreur.
  • Référence circulaire avec JSON.stringify()

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const jsonCopy = JSON.parse(JSON.stringify(original)); // TypeError: Converting circular structure to JSON

• Ce qui se passe?

  • JSON.stringify() échoue également avec les références circulaires, générant une erreur.
  • Référence circulaire avec structuredClone()

  const original = { name: "Alice" };
  original.self = original;

  const clone = structuredClone(original);

  console.log(clone !== original); // true
  console.log(clone.self === clone); // true

• Ce qui se passe?
  • structuredClone() gère de manière transparente les références circulaires, créant un clone profond approprié sans erreurs.

3. Clonage avec fonctions et non défini : un autre test

• Utilisation de {...obj}

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const shallowCopy = { ...original };

  console.log(shallowCopy.greet()); // "Hello!"
  console.log(shallowCopy.value); // undefined

• Ce qui se passe?

  • {...obj} copie les fonctions et non définies comme prévu, mais seulement superficiellement.
  • Utilisation de JSON.stringify()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const jsonCopy = JSON.parse(JSON.stringify(original));

  console.log(jsonCopy.greet); // undefined
  console.log(jsonCopy.value); // undefined

• Ce qui se passe?

  • JSON.stringify() ne peut pas sérialiser les fonctions ou non définies, ce qui entraîne leur perte dans l'objet cloné.
  • Utilisation de structuredClone()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const clone = structuredClone(original);

  console.log(clone.greet); // undefined
  console.log(clone.value); // undefined

• Ce qui se passe?
  • structuréClone() ne clone pas non plus les fonctions mais préserve les valeurs non définies, ce qui le rend plus fiable que JSON.stringify() pour les objets complexes.

4. Vitesse et efficacité : une note de performance

• Efficacité avec les données volumineuses

  const largeArray = new Array(1e6).fill({ key: "value" });

  console.time("structuredClone");
  const clone = structuredClone(largeArray);
  console.timeEnd("structuredClone");

  console.time("JSON.stringify   JSON.parse");
  const jsonCopy = JSON.parse(JSON.stringify(largeArray));
  console.timeEnd("JSON.stringify   JSON.parse");

• Ce qui se passe?
  • structuréClone() est souvent plus rapide que JSON.stringify() JSON.parse() pour les données volumineuses et complexes, et évite les pièges de la sérialisation et de la désérialisation.

5. Conclusion : Pourquoi structuredClone() est l'avenir

• Fiabilité : gère les références circulaires, les fonctions et les valeurs non définies de manière plus prévisible.
• Efficacité : effectue un clonage en profondeur plus rapidement pour les grands ensembles de données et ne nécessite aucune solution de contournement.
• Simplicité : une méthode pour les gouverner tous : plus besoin de choisir entre {...obj}, JSON.stringify() ou des fonctions de clonage profond personnalisées.