0Pricing
JavaScript Academy · Aula

Clonagem e mesclagem — spread e Object.assign

Clone e mescle objetos e arrays usando spread e Object.assign; entenda a cópia superficial e a ordem de substituição

Clonagem e mesclagem — spread e Object.assign é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 2. 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 2 aulas no total.

Introdução

Objetivo: clone e mescle objetos e matrizes com segurança.

  • Expansão para clonar e mesclar
  • Object.assign
  • Ordem de substituição
  • Limitação da cópia superficial
Clonagem e mesclagem — spread e Object.assign — ilustração 1

Expansão: clonagem de objeto

Use {...obj} para fazer uma clonagem superficial. Editar o clone não altera os campos do nível superior no original.

// Shallow clone with object spread
const user = { name: "Ayla", level: 1 };
const clone = { ...user };

clone.level = 2;

console.log("Original:", user);
console.log("Clone:", clone);
Clonagem e mesclagem — spread e Object.assign — ilustração 2

Object.assign: clonagem

Object.assign({}, obj) também faz uma clonagem superficial. Evite alterar a fonte atribuindo os valores a um objeto vazio.

// Shallow clone with Object.assign
const settings = { theme: "dark", compact: false };
const copy = Object.assign({}, settings);

copy.compact = true;

console.log("Settings:", settings);
console.log("Copy:", copy);
Clonagem e mesclagem — spread e Object.assign — ilustração 3

Mesclagem: a ordem importa

A mesclagem depende da ordem: as fontes posteriores substituem as chaves anteriores (b se torna 9 aqui).

// Merge: later keys overwrite earlier ones
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };

const mergedSpread = { ...base, ...extra };
const mergedAssign = Object.assign({}, base, extra);

console.log("Spread merged:", mergedSpread);
console.log("Assign merged:", mergedAssign);
Clonagem e mesclagem — spread e Object.assign — ilustração 4

Expansão de matriz: clonagem e mesclagem

[...arr] clona uma matriz. Combine matrizes com [...a, ...b] sem alterá-las.

// Arrays: clone and merge with spread
const nums = [1, 2, 3];
const cloneNums = [...nums];

const more = [4, 5];
const mergedNums = [...nums, ...more];

console.log("nums:", nums);
console.log("clone:", cloneNums);
console.log("merged:", mergedNums);
Clonagem e mesclagem — spread e Object.assign — ilustração 5

Superficial versus profunda

Cópia superficial: objetos e matrizes aninhados são compartilhados. Para estruturas profundas, copie explicitamente os níveis internos.

// Shallow copy caveat: nested objects are shared
const original = { user: { name: "Mina" }, active: true };
const shallow = { ...original };

// Mutate nested object
shallow.user.name = "Lena";

console.log("Original:", original);
console.log("Shallow:", shallow);
Clonagem e mesclagem — spread e Object.assign — ilustração 6

Quiz sobre clonagem

Verificação rápida: clonagem superficial sem alteração.

Clonagem e mesclagem — spread e Object.assign — ilustração 7

Recapitulação

Recapitulação: clone com expansão ou Object.assign em um objeto vazio, faça a mesclagem colocando as fontes posteriores por último e lembre-se: essas são cópias superficiais.

Clonagem e mesclagem — spread e Object.assign — ilustração 8

Perguntas Frequentes

A aula “Clonagem e mesclagem — spread e Object.assign” é grátis?

Sim — o texto completo de “Clonagem e mesclagem — spread e Object.assign” é 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 2 aulas no total.

O que vou aprender em “Clonagem e mesclagem — spread e Object.assign”?

Clone e mescle objetos e arrays usando spread e Object.assign; entenda a cópia superficial e a ordem de substituição 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 2 de 2.

Quanto tempo leva a aula “Clonagem e mesclagem — spread e Object.assign”?

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. CRUD de matrizes, iteração; noções básicas e acesso a objetos
  2. Clonagem e mesclagem — spread e Object.assign
← Voltar para JavaScript Academy