Structured Clone en JavaScript : Maîtriser la copie profonde d'objets

En JavaScript, la création de copies d'objets et de tableaux est une tâche courante. Alors qu'une simple affectation (`=`) fonctionne pour les valeurs primitives, elle ne crée qu'une référence pour les objets. Cela signifie que les modifications apportées à l'objet copié affecteront également l'original. Pour créer des copies indépendantes, nous avons besoin d'un mécanisme de copie profonde. L'algorithme structured clone offre un moyen puissant et polyvalent d'y parvenir, en particulier lorsqu'on traite des structures de données complexes.

Qu'est-ce que le Structured Clone ?

L'algorithme structured clone est un mécanisme intégré en JavaScript qui vous permet de créer des copies profondes des valeurs JavaScript. Contrairement à une simple affectation ou aux méthodes de copie superficielle (comme `Object.assign()` ou la syntaxe de décomposition `...`), le clonage structuré crée des objets et des tableaux entièrement nouveaux, en copiant récursivement toutes les propriétés imbriquées. Cela garantit que l'objet copié est complètement indépendant de l'original.

Cet algorithme est également utilisé en coulisses pour la communication entre les web workers et lors du stockage de données à l'aide de l'API History. Comprendre son fonctionnement peut vous aider à optimiser votre code et à éviter des comportements inattendus.

Comment fonctionne le Structured Clone

L'algorithme structured clone fonctionne en parcourant le graphe d'objets et en créant de nouvelles instances de chaque objet et tableau rencontré. Il gère divers types de données, notamment :

• Les types primitifs (nombres, chaînes de caractères, booléens, null, undefined) - copiés par valeur.
• Les objets et les tableaux - clonés récursivement.
• Les dates - clonées en tant que nouveaux objets Date avec le même horodatage.
• Les expressions régulières - clonées en tant que nouveaux objets RegExp avec le même motif et les mêmes indicateurs.
• Les objets Blob et File - clonés (mais peut impliquer la lecture de l'intégralité des données du fichier).
• Les ArrayBuffers et les TypedArrays - clonés en copiant les données binaires sous-jacentes.
• Les Maps et les Sets - clonés récursivement, créant de nouveaux Maps et Sets avec des clés et des valeurs clonées.

L'algorithme gère également les références circulaires, empêchant la récursion infinie.

Utiliser le Structured Clone

Bien qu'il n'existe pas de fonction `structuredClone()` directe dans tous les environnements JavaScript (les navigateurs plus anciens peuvent manquer de support natif), le mécanisme sous-jacent est utilisé dans divers contextes. Une manière courante d'y accéder est via l'API `postMessage` utilisée pour la communication entre les web workers ou les iframes.

Méthode 1 : Utiliser `postMessage` (Recommandé pour une large compatibilité)

Cette approche tire parti de l'API `postMessage`, qui utilise en interne l'algorithme structured clone. Nous créons un iframe temporaire, nous lui envoyons l'objet en utilisant `postMessage`, puis nous le recevons en retour.

            function structuredClone(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel();
    port1.onmessage = ev => resolve(ev.data);
    port2.postMessage(obj);
  });
}

// Exemple d'utilisation
const originalObject = { 
  name: "John Doe",
  age: 30, 
  address: { city: "New York", country: "USA" }
};

async function deepCopyExample() {
  const clonedObject = await structuredClone(originalObject);

  console.log("Objet original :", originalObject);
  console.log("Objet cloné :", clonedObject);

  // Modifier l'objet cloné
  clonedObject.address.city = "Los Angeles";

  console.log("Objet original (après modification) :", originalObject); // Inchangé
  console.log("Objet cloné (après modification) :", clonedObject); // Modifié
}

deepCopyExample();

            

              
                Copy
              
            
          

Cette méthode est largement compatible avec différents navigateurs et environnements.

Méthode 2 : `structuredClone` natif (Environnements modernes)

De nombreux environnements JavaScript modernes offrent désormais une fonction `structuredClone()` intégrée directement. C'est la manière la plus efficace et la plus simple d'effectuer une copie profonde lorsqu'elle est disponible.

            // Vérifier si structuredClone est supporté
if (typeof structuredClone === 'function') {
  const originalObject = { 
    name: "Alice Smith",
    age: 25, 
    address: { city: "London", country: "UK" }
  };

  const clonedObject = structuredClone(originalObject);

  console.log("Objet original :", originalObject);
  console.log("Objet cloné :", clonedObject);

  // Modifier l'objet cloné
  clonedObject.address.city = "Paris";

  console.log("Objet original (après modification) :", originalObject); // Inchangé
  console.log("Objet cloné (après modification) :", clonedObject); // Modifié
}
else {
  console.log("structuredClone n'est pas supporté dans cet environnement. Utilisez le polyfill postMessage.");
}

            

              
                Copy
              
            
          

Avant d'utiliser `structuredClone`, il est important de vérifier s'il est supporté dans l'environnement cible. Si ce n'est pas le cas, revenez au polyfill `postMessage` ou à une autre alternative de copie profonde.

Limites du Structured Clone

Bien que puissant, le structured clone a quelques limitations :

• Fonctions : Les fonctions ne peuvent pas être clonées. Si un objet contient une fonction, celle-ci sera perdue lors du processus de clonage. La propriété sera définie à `undefined` dans l'objet cloné.
• Nœuds DOM : Les nœuds DOM (comme les éléments d'une page web) ne peuvent pas être clonés. Tenter de les cloner entraînera une erreur.
• Erreurs : Certains objets d'erreur ne peuvent pas non plus être clonés, et l'algorithme structured clone peut lever une erreur s'il les rencontre.
• Chaînes de prototypes : La chaîne de prototypes des objets n'est pas préservée. Les objets clonés auront `Object.prototype` comme prototype.
• Performance : La copie profonde peut être coûteuse en termes de calcul, en particulier pour les objets volumineux et complexes. Tenez compte des implications sur les performances lors de l'utilisation du structured clone, notamment dans les applications critiques en termes de performance.

Quand utiliser le Structured Clone

Le structured clone est précieux dans plusieurs scénarios :

• Web Workers : Lors du passage de données entre le thread principal et les web workers, le structured clone est le mécanisme principal.
• API History : Les méthodes `history.pushState()` et `history.replaceState()` utilisent le structured clone pour stocker des données dans l'historique du navigateur.
• Copie profonde d'objets : Lorsque vous avez besoin de créer une copie complètement indépendante d'un objet, le structured clone offre une solution fiable. C'est particulièrement utile lorsque vous souhaitez modifier la copie sans affecter l'original.
• Sérialisation et désérialisation : Bien que ce ne soit pas son objectif principal, le structured clone peut être utilisé comme une forme de base de sérialisation et de désérialisation (bien que JSON soit généralement préféré pour la persistance).

Alternatives au Structured Clone

Si le structured clone n'est pas adapté à vos besoins (par exemple, en raison de ses limitations ou de problèmes de performance), envisagez ces alternatives :

• JSON.parse(JSON.stringify(obj)) : C'est une approche courante pour la copie profonde, mais elle a des limites. Elle ne fonctionne que pour les objets qui peuvent être sérialisés en JSON (pas de fonctions, les dates sont converties en chaînes de caractères, etc.) et peut être plus lente que le structured clone pour les objets complexes.
• `_.cloneDeep()` de Lodash : Lodash fournit une fonction `cloneDeep()` robuste qui gère de nombreux cas limites et offre de bonnes performances. C'est une bonne option si vous utilisez déjà Lodash dans votre projet.
• Fonction de copie profonde personnalisée : Vous pouvez écrire votre propre fonction de copie profonde en utilisant la récursion. Cela vous donne un contrôle total sur le processus de clonage, mais cela demande plus d'efforts et peut être source d'erreurs. Assurez-vous de gérer correctement les références circulaires.

Exemples pratiques et cas d'utilisation

Exemple 1 : Copier les données utilisateur avant modification

Imaginez que vous construisez une application de gestion des utilisateurs. Avant de permettre à un utilisateur de modifier son profil, vous pourriez vouloir créer une copie profonde de ses données actuelles. Cela vous permet de revenir aux données originales si l'utilisateur annule la modification ou si une erreur se produit pendant le processus de mise à jour.

            let userData = {
  id: 12345,
  name: "Carlos Rodriguez",
  email: "carlos.rodriguez@example.com",
  preferences: {
    language: "es",
    theme: "dark"
  }
};

async function editUser(newPreferences) {
  // Créer une copie profonde des données originales
  const originalUserData = await structuredClone(userData);

  try {
    // Mettre à jour les données de l'utilisateur avec les nouvelles préférences
    userData.preferences = newPreferences;

    // ... Sauvegarder les données mises à jour sur le serveur ...

    console.log("Données utilisateur mises à jour avec succès !");
  } catch (error) {
    console.error("Erreur lors de la mise à jour des données utilisateur. Retour aux données originales.", error);
    // Revenir aux données originales
    userData = originalUserData;
  }
}

// Exemple d'utilisation
editUser({ language: "en", theme: "light" });

            

              
                Copy
              
            
          

Exemple 2 : Envoyer des données à un Web Worker

Les web workers vous permettent d'effectuer des tâches gourmandes en calcul dans un thread séparé, empêchant le thread principal de devenir non réactif. Lorsque vous envoyez des données à un web worker, vous devez utiliser le structured clone pour vous assurer que les données sont correctement transférées.

            // Thread principal
const worker = new Worker('worker.js');

let dataToSend = {
  numbers: [1, 2, 3, 4, 5],
  text: "Traiter ces données dans le worker."
};

worker.postMessage(dataToSend);

worker.onmessage = (event) => {
  console.log("Reçu du worker :", event.data);
};

// worker.js (Web Worker)
self.onmessage = (event) => {
  const data = event.data;
  console.log("Le worker a reçu les données :", data);

  // ... Effectuer un traitement sur les données ...
  const processedData = data.numbers.map(n => n * 2);

  self.postMessage(processedData);
};

            

              
                Copy
              
            
          

Meilleures pratiques pour l'utilisation du Structured Clone

• Comprendre les limitations : Soyez conscient des types de données qui ne peuvent pas être clonés (fonctions, nœuds DOM, etc.) et gérez-les de manière appropriée.
• Tenir compte des performances : Pour les objets volumineux et complexes, le structured clone peut être lent. Évaluez s'il s'agit de la solution la plus efficace pour vos besoins.
• Vérifier la compatibilité : Si vous utilisez la fonction native `structuredClone()`, vérifiez si elle est supportée dans l'environnement cible. Utilisez un polyfill si nécessaire.
• Gérer les références circulaires : L'algorithme structured clone gère les références circulaires, mais soyez-en conscient dans vos structures de données.
• Éviter de cloner des données inutiles : Ne clonez que les données que vous avez réellement besoin de copier. Évitez de cloner de gros objets ou tableaux si seule une petite partie d'entre eux doit être modifiée.

Conclusion

L'algorithme structured clone de JavaScript est un outil puissant pour créer des copies profondes d'objets et de tableaux. Comprendre ses capacités et ses limitations vous permet de l'utiliser efficacement dans divers scénarios, de la communication avec les web workers à la copie profonde d'objets. En considérant les alternatives et en suivant les meilleures pratiques, vous pouvez vous assurer que vous utilisez la méthode la plus appropriée pour vos besoins spécifiques.

N'oubliez pas de toujours tenir compte des implications sur les performances et de choisir la bonne approche en fonction de la complexité et de la taille de vos données. En maîtrisant le structured clone et d'autres techniques de copie profonde, vous pouvez écrire un code JavaScript plus robuste et plus efficace.

Pour en savoir plus

• Documentation MDN : L'algorithme structured clone
• Documentation MDN : structuredClone
• Documentation MDN : Worker.postMessage()