Table des matières

• Introduction
• Comprendre et utiliser structuredClone
• Conclusion

Introduction

Avez-vous déjà essayé de copier un objet en Javascript à l'aide de l'opérateur spread (...), pour vous rendre compte que les modifications apportées à l'original affectent toujours la copie ? Cela peut être frustrant lorsque vous attendez une copie indépendante de l’original mais que vous finissez par en avoir une liée à l’original. Il s'agit d'un problème courant lorsqu'on traite des objets profonds, et cela peut entraîner des bugs inattendus. Heureusement, Javascript dispose de la méthode structuréClone() pour résoudre ce problème

Comprendre et utiliser structuredClone()

Pour commencer, la méthode structuréClone() en Javascript est utilisée pour créer des copies complètes d'objets, y compris ceux avec des structures imbriquées comme des tableaux, des objets et d'autres types de données complexes.

Vous vous demandez peut-être : qu'est-ce qu'une copie exactement et combien de types de copie avons-nous en JavaScript ? Eh bien, nous avons les copies peu profondes et profondes. Bien que nous sachions que structuredClone() crée ce dernier, l'utilisation de l'opérateur spread crée le premier.

Une copie superficielle copie uniquement les propriétés de niveau supérieur d'un objet, ce qui signifie que les objets ou tableaux imbriqués sont toujours référencés à partir de l'original. D'un autre côté, une copie complète duplique tout, y compris les structures imbriquées, garantissant que le clone est totalement indépendant de l'original.

Voyons quelques exemples de copies Shallow et Deep en javascript

Exemple de copie superficielle

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

À partir du code ci-dessus, nous pouvons dire ce qui suit :

• La propriété name est une valeur primitive, donc la modifier dans la copie superficielle (personClone.name = "Jane Doe";) n'affecte pas l'original (person.name)
• Le tableau langues n'est pas primitif, donc l'original(person) et le clone(personClone) partagent la même référence. La modification du tableau personClone affecte le tableau de personnes d'origine

Exemple de copie approfondie

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

// Create a deep copy using structuredClone
const deepClonedPerson = structuredClone(person);

// Modify the deep cloned object
deepClonedPerson.languages.push("Spanish");

// Check if the original and the deep clone are equal
console.log(person === deepClonedPerson);  // Output: false
console.log(person.languages) // ['English', 'German']
console.log(deepClonedPerson.languages) // ['English', 'German', 'Spanish']
console.log(person.languages === deepClonedPerson.languages);  // Output: false

// Check if the properties are equal
console.log(person.name === deepClonedPerson.name);  // Output: false

// Changes in the deep cloned object don't affect the original
deepClonedPerson.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(deepClonedPerson.name);  // Output: "Jane Doe"

À partir du code ci-dessus, nous pouvons conclure ce qui suit :

• person === deepClonedPerson confirme que structuredClone() crée un nouvel objet indépendant.
• person.langues === deepClonedPerson.langues montre que le tableau imbriqué est également copié indépendamment.
• La vérification de person.name === deepClonedPerson.name vérifie que les modifications apportées au clone profond n'affectent pas l'objet d'origine.
• Les valeurs des langages démontrent que les modifications apportées au clone profond (deepClonedPerson) ne sont pas reflétées dans l'original (personne)

Conclusion

Dans cet article, nous avons exploré comment la méthode structuréClone() fournit un moyen fiable de créer des copies complètes d'objets, garantissant que les structures imbriquées sont totalement indépendantes de l'original.

Merci d'avoir lu cet article. Si vous avez trouvé cet article utile, veuillez l'aimer et le partager avec d'autres personnes qui pourraient bénéficier de l'apprentissage de la copie approfondie en Javascript

Que pensez-vous de ce sujet ? Avez-vous rencontré d'autres techniques pour copier des objets en Javascript ? N'hésitez pas à partager vos idées dans la section commentaires ci-dessous.

P.S. Je suis actuellement à la recherche d'opportunités de développement frontend. Si vous avez des pistes ou recrutez, n'hésitez pas à consulter mon CV ou à me contacter sur LinkedIn. J'aimerais avoir de vos nouvelles !