Desestruturação e spread de objetos
Extraia propriedades de objetos com desestruturação, clone e mescle objetos com o operador spread e use parâmetros rest nas assinaturas de funções.
Desestruturação e spread de objetos é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é desestruturação?
A desestruturação extrai valores de objetos e matrizes para variáveis nomeadas. É uma forma abreviada de várias instruções de acesso a propriedades — torna o código conciso e comunica claramente quais propriedades são usadas.
Noções básicas de desestruturação de objetos
Use chaves à esquerda de uma atribuição para extrair propriedades nomeadas.
const user = { name: 'Alice', age: 30, role: 'admin' };
// Without destructuring:
const name = user.name;
const age = user.age;
// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age); // 30Renomeando variáveis desestruturadas
Use a sintaxe property: newName para renomear uma propriedade durante a desestruturação. Isso é útil quando o nome da propriedade entra em conflito com uma variável existente ou não é suficientemente descritivo.
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'Valores padrão na desestruturação
Se uma propriedade for undefined, será usado um valor padrão. Combine isso com a renomeação.
const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)Desestruturação de objetos aninhados
Desestruture objetos aninhados fornecendo padrões aninhados.
const order = {
id: 42,
customer: { name: 'Bob', email: 'bob@example.com' },
total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'Desestruturação de matrizes
Use colchetes para desestruturar matrizes por posição. Ignore elementos usando vírgulas.
const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first); // 10
console.log(second); // 20
console.log(fourth); // 40
// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1Desestruturação de parâmetros de funções
Desestruture diretamente nos parâmetros de funções para obter interfaces mais limpas e código autoexplicativo. Isso é muito comum em funções de componentes React.
function greet({ name, greeting = 'Hello' }) {
return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' }); // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'O operador de expansão em objetos
O operador de expansão { ...obj } cria uma cópia superficial de um objeto e pode combinar objetos. Quando as chaves colidem, as chaves posteriores substituem as anteriores.
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }O operador de expansão em matrizes
[...arr] cria uma cópia superficial de uma matriz. Use a expansão para concatenar matrizes e adicionar itens no início ou no fim sem alterá-las.
const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base]; // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]Sintaxe de coleta na desestruturação
A sintaxe de coleta reúne as propriedades ou os elementos restantes em um novo objeto ou matriz. A coleta deve ser o último padrão.
const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]Cópia superficial vs cópia profunda
Tanto a expansão quanto a desestruturação criam cópias superficiais. Objetos e matrizes aninhados ainda são referências compartilhadas. Faça uma clonagem profunda com structuredClone(obj) (moderno) ou JSON.parse(JSON.stringify(obj)) (legado).
const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99; // a.x is still 1 (shallow copy OK)
b.nested.y = 99; // a.nested.y is now 99! (reference shared)Verificação rápida
O que const { a, ...rest } = obj faz?
Recapitulação: desestruturação e expansão
A desestruturação de objetos extrai propriedades nomeadas. A desestruturação de matrizes extrai valores por posição. Renomeie com dois-pontos e defina valores padrão com =. Use padrões aninhados para objetos profundos. A expansão cria cópias superficiais e combina objetos ou matrizes. A sintaxe de coleta reúne as propriedades ou os elementos restantes.
Perguntas Frequentes
A aula “Desestruturação e spread de objetos” é grátis?
Sim — o texto completo de “Desestruturação e spread de objetos” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Desestruturação e spread de objetos”?
Extraia propriedades de objetos com desestruturação, clone e mescle objetos com o operador spread e use parâmetros rest nas assinaturas de funções. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 4.
Quanto tempo leva a aula “Desestruturação e spread de objetos”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Métodos de array: map filter reduce find
- Desestruturação e spread de objetos
- Literais de template e encadeamento opcional
- Módulos: import e export