Tabla de contenido

• Introducción
• Comprensión y uso de clones estructurados
• Conclusión

Introducción

¿Alguna vez has intentado copiar un objeto en Javascript usando el operador de extensión (...), solo para darte cuenta de que los cambios en el original aún afectan la copia? Puede resultar frustrante esperar una copia independiente del original pero terminar teniendo una vinculada al original. Este es un problema común cuando se trata de objetos profundos y puede provocar errores inesperados. Afortunadamente, Javascript tiene el método estructuradoClone() para resolver este problema

Comprensión y uso de StructuredClone()

Para empezar, el método estructuradoClone() en Javascript se utiliza para realizar copias profundas de objetos, incluidos aquellos con estructuras anidadas como matrices, objetos y otros tipos de datos complejos.

Quizás te preguntes: ¿qué es exactamente una copia y cuántos tipos de copia tenemos en JavaScript? Bueno, tenemos las copias superficiales y profundas. Si bien sabemos que StructuredClone() crea lo último, usar el operador de extensión crea lo primero.

Una copia superficial copia solo las propiedades de nivel superior de un objeto, lo que significa que aún se hace referencia a los objetos o matrices anidados desde el original. Por otro lado, una copia profunda duplica todo, incluidas las estructuras anidadas, asegurando que el clon sea completamente independiente del original.

Veamos algunos ejemplos de las copias Shallow y Deep en javascript

Ejemplo de copia 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

Del código anterior, podemos decir lo siguiente:

• La propiedad name es un valor primitivo, por lo que cambiarla en la copia superficial (personClone.name = "Jane Doe";) no afecta el original (person.name)
• La matriz idiomas no es primitiva, por lo que tanto el original (persona) como el clon (personaClone) comparten la misma referencia. La modificación de la matriz personClone afecta la matriz de personas original

Ejemplo de copia 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"

Del código anterior, podemos concluir lo siguiente:

• person === deepClonedPerson confirma que StructuredClone() crea un objeto nuevo e independiente.
• person.languages ​​=== deepClonedPerson.languages ​​muestra que la matriz anidada también se copia de forma independiente.
• Verificar person.name === deepClonedPerson.name verifica que los cambios en el clon profundo no afecten al objeto original.
• Los valores de los idiomas demuestran que las modificaciones al clon profundo (deepClonedPerson) no se reflejan en la (persona) original

Conclusión

En este artículo, exploramos cómo el método estructuradoClone() proporciona una forma confiable de crear copias profundas de objetos, asegurando que las estructuras anidadas sean completamente independientes del original.

Gracias por leer este artículo. Si este artículo te resultó útil, dale Me gusta y compártelo con otras personas que puedan beneficiarse al aprender sobre copia profunda en Javascript

¿Qué piensas sobre este tema? ¿Ha encontrado otras técnicas para copiar objetos en Javascript? No dude en compartir sus ideas en la sección de comentarios a continuación.

P.D. Actualmente estoy buscando oportunidades de desarrollador frontend. Si tiene alguna pista o está contratando, no dude en consultar mi currículum o conectarse conmigo en LinkedIn. ¡Me encantaría saber de ti!