Índice

• Introdução
• Compreendendo e usando o Clone estruturado
• Conclusão

Introdução

Você já tentou copiar um objeto em Javascript usando o operador spread (...), apenas para perceber que alterações no original ainda afetam a cópia? Pode ser frustrante quando você espera uma cópia independente do original, mas acaba tendo uma vinculada ao original. Este é um problema comum ao lidar com objetos profundos e pode levar a bugs inesperados. Felizmente, Javascript possui o método StructureClone() para resolver este problema

Compreendendo e usando StructureClone()

Para começar, o método StructureClone() em Javascript é usado para fazer cópias profundas de objetos, incluindo aqueles com estruturas aninhadas como arrays, objetos e outros tipos de dados complexos.

Você deve estar se perguntando: o que exatamente é uma cópia, e quantos tipos de cópia temos em JavaScript? Bem, temos as cópias superficiais e profundas. Embora saibamos que estruturadoClone() cria o último, usar o operador de propagação cria o primeiro.

Uma cópia superficial copia apenas as propriedades de nível superior de um objeto, o que significa que objetos ou matrizes aninhados ainda são referenciados do original. Por outro lado, uma cópia profunda duplica tudo, incluindo estruturas aninhadas, garantindo que o clone seja totalmente independente e do original.

Vamos ver alguns exemplos das cópias Shallow e Deep em javascript

Exemplo de cópia superficial

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

Do código acima, podemos dizer o seguinte:

• A propriedade name é um valor primitivo, portanto alterá-la na cópia superficial(personClone.name = "Jane Doe";) não afeta o original (person.name)
• O array idiomas não é primitivo, portanto, tanto o original(person) quanto o clone(personClone) compartilham a mesma referência. Modificar a matriz personClone afeta a matriz da pessoa original

Exemplo de cópia profunda

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"

Do código acima, podemos concluir o seguinte:

• person === deepClonedPerson confirma que estruturadoClone() cria um objeto novo e independente.
• person.languages ​​=== deepClonedPerson.languages ​​mostra que a matriz aninhada também é copiada de forma independente.
• Verificar person.name === deepClonedPerson.name verifica se as alterações no clone profundo não afetam o objeto original.
• Os valores das linguagens demonstram que as modificações no clone profundo (deepClonedPerson) não são refletidas no original(person)

Conclusão

Neste artigo, exploramos como o método StructureClone() fornece uma maneira confiável de criar cópias profundas de objetos, garantindo que as estruturas aninhadas sejam totalmente independentes do original.

Obrigado por ler este artigo. Se você achou este artigo útil, curta e compartilhe-o com outras pessoas que possam se beneficiar aprendendo sobre cópia profunda em Javascript

O que você acha deste assunto? Você encontrou outras técnicas para copiar objetos em Javascript? Sinta-se à vontade para compartilhar suas idéias na seção de comentários abaixo.

P.S. Atualmente estou procurando oportunidades de desenvolvedor front-end. Se você tiver alguma pista ou estiver contratando, fique à vontade para conferir meu currículo ou entrar em contato comigo no LinkedIn. Eu adoraria ouvir de você!