Desestruturação
Desestruturação é a sintaxe que atribui propriedades de um object ou itens de um array a variáveis por meio de um padrão. A fonte não é alterada. Usaremos este pedido:
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
Desestruturação básica de object
Os nomes entre {} selecionam propriedades de mesmo nome no valor à direita e criam duas constantes.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest, drink } = order;
console.log(guest);
console.log(drink);
A saída é lida e depois tea. É uma forma curta de ler order.guest e order.drink; nada é removido de order.
Renomear e definir um valor padrão
O padrão property: variable escolhe outro nome para a variável. O valor após = só é usado quando a propriedade é undefined.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest: customer, size = "regular" } = order;
console.log(customer);
console.log(size);
customer recebe lida. Como size não existe, recebe regular. Esse padrão não cria uma variável chamada guest.
Ler uma propriedade aninhada
Um padrão aninhado acompanha o formato do object. A parte { city } lê city de order.address.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { address: { city } } = order;
console.log(city);
A saída é rasht, sem criar uma variável address. Se address estiver ausente ou for undefined, a leitura de city poderá causar erro. Optional chaining não cabe nesse padrão; verifique ou normalize o valor antes.
Desestruturação de array
Os colchetes [] associam itens por posição. A primeira variável recebe o índice 0, e a segunda, o índice 1.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const [firstExtra, secondExtra] = order.extras;
console.log(firstExtra);
console.log(secondExtra);
A saída é mint e depois lemon. Você escolhe os nomes, mas a posição define o valor. order.extras continua com os dois itens.
Desestruturar um parâmetro
Uma função pode extrair propriedades diretamente na lista de parâmetros. Esta função usa apenas guest e drink.
function label({ guest, drink }) {
return guest + " ordered " + drink;
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
console.log(label(order));
A chamada retorna lida ordered tea. O padrão é aplicado na chamada; passar null ou undefined causa erro se a função não tratar esses valores.
Demonstração completa
A página combina desestruturação de object, array e parâmetro para exibir o resumo do pedido.
<!doctype html>
<html lang="pt">
<head><meta charset="utf-8"><title>Desestruturação em JavaScript</title></head>
<body>
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
function summary({ guest, drink, extras }) {
const [firstExtra] = extras;
return guest + " / " + drink + " / " + firstExtra;
}
document.getElementById("result").textContent = summary(order);
</script>
</body>
</html>
A saída visível é exatamente lida / tea / mint. A função lê somente os dados necessários e não altera order.
include_try
Renomeie drink para beverage e dê um valor padrão à propriedade ausente table. Depois teste um pedido sem address e verifique-a antes do padrão aninhado.
mistakes
Não confunda propriedade com variável renomeada, não espere que o padrão substitua null e não presuma que o object aninhado existe. {} corresponde a propriedades e [] a posições; a fonte permanece intacta. Rest e spread ficam para spread-rest.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo