A desestruturação (destructuring) é uma funcionalidade poderosa do JavaScript que permite extrair dados de arrays e objetos de forma concisa e legível. Em vez de acessar elementos manualmente por índice ou propriedade, você pode 'desestruturar' a estrutura em variáveis individuais em uma única expressão. Isso torna o código mais limpo, reduz repetições e facilita a manipulação de dados complexos.

Nesta aula, vamos explorar a sintaxe básica, como definir valores padrão para evitar undefined, renomear propriedades de objetos e trabalhar com desestruturação aninhada para acessar dados em profundidade. Cada tópico será acompanhado de exemplos práticos e exercícios para fixar o aprendizado.

Sintaxe

A desestruturação de arrays usa colchetes [] do lado esquerdo da atribuição, enquanto a de objetos usa chaves {}. A ordem dos elementos no array ou das propriedades no objeto determina a correspondência com as variáveis.

Exemplo com array:

const arr = [10, 20, 30];
const [a, b, c] = arr;
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

Exemplo com objeto:

const obj = { nome: 'Ana', idade: 25 };
const { nome, idade } = obj;
console.log(nome); // Ana
console.log(idade); // 25

Você também pode pular elementos com vírgulas vazias em arrays:

const [primeiro, , terceiro] = [1, 2, 3];
console.log(primeiro); // 1
console.log(terceiro); // 3

Valores padrão

Ao desestruturar, se um valor for undefined, você pode definir um valor padrão que será usado no lugar. Isso evita que a variável fique indefinida.

Exemplo com array:

const [x = 10, y = 20] = [5];
console.log(x); // 5
console.log(y); // 20 (padrão usado porque o segundo elemento é undefined)

Exemplo com objeto:

const { nome = 'Visitante', idade = 18 } = { nome: 'João' };
console.log(nome); // João
console.log(idade); // 18 (padrão usado porque idade não existe)

Os valores padrão só são aplicados se o valor extraído for estritamente undefined. Valores como null não acionam o padrão.

Renomeação

Na desestruturação de objetos, você pode renomear a variável extraída usando a sintaxe propriedade: novoNome. Isso é útil quando você quer evitar conflitos de nomes ou usar nomes mais curtos.

Exemplo:

const usuario = { nome: 'Maria', email: 'maria@example.com' };
const { nome: nomeUsuario, email: emailUsuario } = usuario;
console.log(nomeUsuario); // Maria
console.log(emailUsuario); // maria@example.com

Você pode combinar renomeação com valores padrão:

const { nome: nomeCompleto = 'Anônimo' } = {};
console.log(nomeCompleto); // Anônimo

Renomeação também funciona com arrays? Tecnicamente não, pois arrays são indexados por posição, mas você pode usar um alias atribuindo a uma variável com nome diferente após a desestruturação. No entanto, a sintaxe de renomeação é específica para objetos.

Aninhada

A desestruturação aninhada permite extrair dados de estruturas complexas, como objetos dentro de arrays ou arrays dentro de objetos, em uma única expressão.

Exemplo com objeto aninhado:

const dados = {
  id: 1,
  info: {
    titulo: 'Aula',
    descricao: 'Desestruturação'
  }
};
const { id, info: { titulo, descricao } } = dados;
console.log(id); // 1
console.log(titulo); // Aula
console.log(descricao); // Desestruturação

Exemplo com array de objetos:

const pessoas = [
  { nome: 'Carlos', idade: 30 },
  { nome: 'Julia', idade: 22 }
];
const [{ nome: nome1 }, { nome: nome2 }] = pessoas;
console.log(nome1); // Carlos
console.log(nome2); // Julia

Você também pode combinar desestruturação aninhada com valores padrão e renomeação para maior flexibilidade.

Boas práticas

  • Use desestruturação para extrair múltiplos valores de funções que retornam objetos ou arrays, como em APIs.
  • Evite desestruturação excessivamente aninhada que prejudique a legibilidade; em casos complexos, considere extrair partes separadamente.
  • Valores padrão são úteis para garantir que variáveis tenham um fallback, mas cuidado com valores falsy como 0 ou '' que não acionam o padrão.
  • Renomeação é excelente para evitar conflitos com variáveis existentes ou para dar nomes mais significativos.

Referências

Exercícios

  1. Dado o array [1, 2, 3, 4], use desestruturação para extrair o primeiro e o terceiro elementos em variáveis a e b.

    ✓ Resposta: 
    const [a, , b] = [1, 2, 3, 4];
console.log(a); // 1
console.log(b); // 3
  2. Dado o objeto { produto: 'Notebook', preco: 2500 }, extraia as propriedades renomeando para item e valor.

    ✓ Resposta: 
    const { produto: item, preco: valor } = { produto: 'Notebook', preco: 2500 };
console.log(item); // Notebook
console.log(valor); // 2500
  3. Desestruture o array [10, 20] atribuindo valores padrão 0 e 0 para as variáveis x e y, mas o array tem apenas um elemento.

    ✓ Resposta: 
    const [x = 0, y = 0] = [10];
console.log(x); // 10
console.log(y); // 0
  4. Dado o objeto { usuario: { nome: 'Pedro', endereco: { cidade: 'SP' } } }, extraia nome e cidade em uma única desestruturação.

    ✓ Resposta: 
    const { usuario: { nome, endereco: { cidade } } } = { usuario: { nome: 'Pedro', endereco: { cidade: 'SP' } } };
console.log(nome); // Pedro
console.log(cidade); // SP
  5. Use desestruturação com valor padrão e renomeação: extraia a propriedade cor do objeto {} (vazio) com valor padrão 'preto' e renomeie para corFundo.

    ✓ Resposta: 
    const { cor: corFundo = 'preto' } = {};
console.log(corFundo); // preto