• ¿Qué es el clon estructurado()?

  • StructuredClone() es una función global introducida en 2022 que permite la clonación profunda de objetos JavaScript. A diferencia de los métodos tradicionales como JSON.stringify() y JSON.parse(), que luchan con estructuras complejas y referencias circulares, StructuredClone() maneja estos desafíos sin esfuerzo.

• ¿Por qué cambia las reglas del juego?

  • Es una herramienta sólida para crear clones profundos reales, preservando la integridad de objetos anidados y referencias circulares sin la necesidad de lógica adicional o soluciones alternativas. Además, está disponible en entornos modernos, incluidos Web Workers.

1. Clonación de objetos simple: conceptos básicos

• Usando {...obj} (Copia superficial)

  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

• ¿Lo que está sucediendo?

  • El operador de extensión {...obj} solo crea una copia superficial. El objeto de detalles no está profundamente clonado, por lo que los cambios en superficialCopy.details también afectan los detalles originales.
  • Usando JSON.stringify() JSON.parse() (Copia profunda)

  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

• ¿Lo que está sucediendo?

  • Este método crea una copia profunda, pero tiene limitaciones: no puede manejar funciones, referencias circulares o indefinidas.
  • Usando StructuredClone() (Copia profunda)

  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

• ¿Lo que está sucediendo?
  • StructuredClone() crea un clon profundo, preservando la estructura sin ninguna de las limitaciones de JSON.stringify() y manejando tipos de datos complejos como referencias circulares e indefinidos.

2. Manejo de referencias circulares: un desafío

• Referencia circular con {...obj}

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

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

• ¿Lo que está sucediendo?

  • {...obj} no puede manejar referencias circulares, lo que genera un error.
  • Referencia circular con 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

• ¿Lo que está sucediendo?

  • JSON.stringify() también falla con referencias circulares, generando un error.
  • Referencia circular con Clon estructurado()

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

  const clone = structuredClone(original);

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

• ¿Lo que está sucediendo?
  • StructuredClone() maneja perfectamente las referencias circulares, creando un clon profundo adecuado y sin errores.

3. Clonación con Funciones e indefinido: Otra Prueba

• Usando {...obj}

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

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

• ¿Lo que está sucediendo?

  • {...obj} copia funciones e indefinidas como se esperaba, pero solo de manera superficial.
  • Usando 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

• ¿Lo que está sucediendo?

  • JSON.stringify() no puede serializar funciones o funciones indefinidas, lo que provoca su pérdida en el objeto clonado.
  • Usando Clon estructurado()

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

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

• ¿Lo que está sucediendo?
  • StructuredClone() tampoco clona funciones pero conserva valores indefinidos, lo que lo hace más confiable que JSON.stringify() para objetos complejos.

4. Velocidad y eficiencia: una nota sobre el rendimiento

• Eficiencia con Big Data

  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");

• ¿Lo que está sucediendo?
  • StructuredClone() suele ser más rápido que JSON.stringify() JSON.parse() para datos grandes y complejos, y evita los problemas de serializar y deserializar.

5. Conclusión: Por qué estructuradoClone() es el futuro

• Confiabilidad: maneja referencias circulares, funciones y valores indefinidos de forma más predecible.
• Eficiencia: realiza una clonación profunda más rápida para grandes conjuntos de datos y no requiere soluciones alternativas.
• Simplicidad: un método para gobernarlos a todos: ya no tendrás que elegir entre {...obj}, JSON.stringify() o funciones de clonación profunda personalizadas.