• O que é Clone estruturado()?

  • estruturadoClone() é uma função global introduzida em 2022 que permite a clonagem profunda de objetos JavaScript. Ao contrário dos métodos tradicionais como JSON.stringify() e JSON.parse(), que lutam com estruturas complexas e referências circulares, estruturadoClone() lida com esses desafios sem esforço.

• Por que isso muda o jogo?

  • É uma ferramenta robusta para criar clones profundos verdadeiros, preservando a integridade de objetos aninhados e referências circulares sem a necessidade de lógica extra ou soluções alternativas. Além disso, está disponível em ambientes modernos, incluindo Web Workers.

1. Clonagem de objetos simples: o básico

• Usando {...obj} (cópia 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

• O que está acontecendo?

  • O operador spread {...obj} cria apenas uma cópia superficial. O objeto de detalhes não é clonado profundamente, portanto, as alterações em superficialCopy.details também afetam os detalhes originais.
  • Usando JSON.stringify() JSON.parse() (cópia 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

• O que está acontecendo?

  • Este método cria uma cópia profunda, mas tem limitações: não pode lidar com funções, referências indefinidas ou circulares.
  • Usando StructureClone() (cópia 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

• O que está acontecendo?
  • estruturadoClone() cria um clone profundo, preservando a estrutura sem nenhuma das limitações de JSON.stringify() e manipulando tipos de dados complexos como referências circulares e indefinidos.

2. Lidando com referências circulares: um desafio

• Referência circular com {...obj}

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

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

• O que está acontecendo?

  • {...obj} não consegue lidar com referências circulares, resultando em um erro.
  • Referência circular com 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

• O que está acontecendo?

  • JSON.stringify() também falha com referências circulares, gerando um erro.
  • Referência circular com Clone estruturado()

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

  const clone = structuredClone(original);

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

• O que está acontecendo?
  • estruturadoClone() lida perfeitamente com referências circulares, criando um clone profundo adequado sem erros.

3. Clonagem com Funções e indefinido: Outro Teste

• Usando {...obj}

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

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

• O que está acontecendo?

  • {...obj} copia funções e indefinido como esperado, mas apenas superficialmente.
  • 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

• O que está acontecendo?

  • JSON.stringify() não pode serializar funções ou indefinidas, resultando em sua perda no objeto clonado.
  • Usando Clone estruturado()

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

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

• O que está acontecendo?
  • StructureClone() também não clona funções, mas preserva valores indefinidos, tornando-o mais confiável que JSON.stringify() para objetos complexos.

4. Velocidade e eficiência: uma nota de desempenho

• Eficiência com grandes volumes de dados

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

• O que está acontecendo?
  • StructureClone() geralmente é mais rápido que JSON.stringify() JSON.parse() para dados grandes e complexos e evita as armadilhas de serialização e desserialização.

5. Conclusão: Por que estruturadoClone() é o futuro

• Confiabilidade: Lida com referências circulares, funções e valores indefinidos de maneira mais previsível.
• Eficiência: executa clonagem profunda com mais rapidez para grandes conjuntos de dados e não requer soluções alternativas.
• Simplicidade: um método para governar todos eles - não é mais necessário escolher entre {...obj}, JSON.stringify() ou funções personalizadas de clone profundo.