0Pricing
JavaScript Academy · Aula

structuredClone para cópias profundas

Clone objetos complexos com segurança.

structuredClone para cópias profundas é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

O problema da cópia profunda

O operador de propagação e Object.assign fazem cópias superficiais: os objetos aninhados são compartilhados por referência. Para duplicar completamente uma estrutura aninhada, é necessária uma cópia profunda.

structuredClone é a solução integrada.

Por que a propagação não basta

Uma cópia feita pelo operador de propagação compartilha os objetos aninhados. Alterar a parte aninhada da cópia também afeta o original.

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone vem ao resgate

structuredClone copia recursivamente toda a estrutura. As alterações feitas no clone nunca afetam o original.

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

Objetos aninhados independentes

Após a clonagem, cada objeto aninhado é uma referência distinta, portanto a comparação de identidade é falsa em todos os níveis.

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

Clonando vetores

Vetores, inclusive os aninhados, também são clonados profundamente. Adicionar um item a um vetor aninhado do clone não altera a origem.

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

Compatibilidade com mapas e conjuntos

Ao contrário de JSON.parse(JSON.stringify(...)), structuredClone oferece suporte a muitos tipos integrados, incluindo Map, Set e Date.

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

Compatibilidade com referências circulares

Um objeto autorreferente quebra o truque do JSON, mas é clonado corretamente com structuredClone.

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

O que não pode ser clonado

structuredClone não pode copiar funções nem nós do DOM; ele lança um DataCloneError. Ele também descarta as cadeias de protótipos, retornando objetos simples.

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

Os protótipos não são preservados

Uma instância clonada de uma classe se torna um objeto simples: os dados são copiados, mas os métodos e o protótipo são perdidos.

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone versus o truque do JSON

O antigo JSON.parse(JSON.stringify(x)) perde undefined, transforma datas em strings e falha com ciclos. structuredClone evita esses problemas com dados serializáveis.

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

Por que isso é importante

structuredClone oferece uma cópia profunda confiável e integrada para dados simples, substituindo clones frágeis feitos manualmente. Use-o quando precisar de uma cópia totalmente independente de um state aninhado e lembre-se de que ele remove funções e protótipos.

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

Verificação rápida

Por que usar structuredClone em vez do operador de propagação para dados aninhados?

Recapitulação: structuredClone

Você aprendeu a fazer cópias profundas de forma confiável:

  • A propagação é superficial; structuredClone copia profundamente.
  • Ele oferece suporte a Map, Set, Date e referências circulares.
  • Ele não pode clonar funções nem nós do DOM e descarta os protótipos.
  • É uma alternativa mais segura ao truque JSON.parse(JSON.stringify()).

Perguntas Frequentes

A aula “structuredClone para cópias profundas” é grátis?

Sim — o texto completo de “structuredClone para cópias profundas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “structuredClone para cópias profundas”?

Clone objetos complexos com segurança. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “structuredClone para cópias profundas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Object.freeze e seal
  2. Congelamento superficial versus profundo
  3. Padrões de atualização imutável
  4. structuredClone para cópias profundas
← Voltar para JavaScript Academy