A desestruturação (destructuring) é um recurso poderoso introduzido no ES6 que permite extrair valores de arrays e objetos de maneira direta e expressiva. Em vez de acessar elementos ou propriedades manualmente, você pode 'desestruturar' a estrutura em variáveis individuais em uma única linha de código. Isso torna o código mais limpo e reduz a repetição.

Nesta aula, vamos explorar a sintaxe básica para arrays e objetos, como definir valores padrão para casos de ausência, renomear variáveis ao desestruturar objetos e lidar com estruturas aninhadas (arrays dentro de objetos, objetos dentro de arrays, etc.). Ao final, você terá domínio sobre essa técnica essencial para programação moderna em JavaScript.

Sintaxe

A desestruturação segue uma sintaxe que espelha a estrutura do dado: colchetes [] para arrays e chaves {} para objetos. Do lado esquerdo da atribuição, colocamos os nomes das variáveis que receberão os valores, na mesma ordem ou com os mesmos nomes das propriedades.

Desestruturação de Arrays:

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

Você pode ignorar elementos usando vírgulas vazias:

const [primeiro, , terceiro] = numeros;
console.log(primeiro); // 10
console.log(terceiro); // 30

Desestruturação de Objetos:

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

A ordem não importa; o que importa é o nome da propriedade. Se a propriedade não existir, a variável recebe undefined.

Valores padrão

Você pode definir valores padrão para variáveis caso a propriedade ou o elemento do array seja undefined. Isso é útil para evitar valores inesperados.

Em arrays:

const arr = [1];
const [x, y = 10] = arr;
console.log(x); // 1
console.log(y); // 10 (padrão)

Em objetos:

const config = { tema: 'escuro' };
const { tema, cor = 'azul' } = config;
console.log(tema); // 'escuro'
console.log(cor);  // 'azul' (padrão)

O valor padrão só é aplicado se o valor extraído for estritamente undefined. Valores como null não disparam o padrão.

Renomeação

Ao desestruturar objetos, você pode renomear a variável para um nome diferente da propriedade original, usando a sintaxe { propriedade: novoNome }.

const usuario = { nome: 'Carlos', idade: 30 };
const { nome: nomeUsuario, idade: idadeUsuario } = usuario;
console.log(nomeUsuario); // 'Carlos'
console.log(idadeUsuario); // 30

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

const { cor: corFundo = 'branco' } = {};
console.log(corFundo); // 'branco' (padrão)

Para arrays, renomeação não se aplica diretamente (os índices são posicionais).

Aninhada

Desestruturação aninhada permite extrair dados de estruturas complexas, como objetos dentro de arrays, arrays dentro de objetos, ou objetos dentro de objetos.

Objeto aninhado:

const dados = {
  id: 1,
  perfil: {
    nome: 'Maria',
    endereco: { cidade: 'São Paulo', estado: 'SP' }
  }
};

const { perfil: { nome, endereco: { cidade } } } = dados;
console.log(nome);   // 'Maria'
console.log(cidade); // 'São Paulo'

Array de objetos:

const alunos = [
  { nome: 'João', nota: 8 },
  { nome: 'Ana', nota: 9 }
];

const [primeiroAluno, segundoAluno] = alunos;
console.log(primeiroAluno.nome); // 'João'

// Extraindo diretamente propriedades:
const [{ nome: nome1 }, { nome: nome2 }] = alunos;
console.log(nome1); // 'João'
console.log(nome2); // 'Ana'

Mistura de arrays e objetos:

const dadosMistos = {
  titulo: 'Aula',
  tags: ['JS', 'ES6'],
  autor: { nome: 'Pedro', idade: 28 }
};

const { titulo, tags: [tag1, tag2], autor: { nome: autorNome } } = dadosMistos;
console.log(titulo);    // 'Aula'
console.log(tag1);      // 'JS'
console.log(autorNome); // 'Pedro'

Lembre-se de que a desestruturação aninhada deve espelhar exatamente a estrutura do dado, caso contrário resultará em erro ou undefined.

Boas práticas

  • Use desestruturação para extrair múltiplos valores de forma concisa, especialmente em parâmetros de função e retornos de API.
  • Prefira valores padrão para propriedades opcionais, evitando verificações manuais.
  • Renomeie variáveis quando o nome original for muito genérico ou conflitar com outras variáveis.
  • Evite aninhamento excessivo que torne o código difícil de ler; considere extrair partes intermediárias.

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 c. Ignore o segundo.

    ✓ Resposta:
    const arr = [1, 2, 3, 4];
const [a, , c] = arr;
console.log(a); // 1
console.log(c); // 3

  2. Desestruture o objeto { produto: 'Caneta', preco: 2.5 } extraindo as propriedades produto e preco. Atribua um valor padrão de 1.0 para preco caso não exista.

    ✓ Resposta:
    const obj = { produto: 'Caneta', preco: 2.5 };
const { produto, preco = 1.0 } = obj;
console.log(produto); // 'Caneta'
console.log(preco);   // 2.5

  3. Desestruture o objeto { nome: 'José', idade: 40 } renomeando nome para nomePessoa e idade para idadePessoa.

    ✓ Resposta:
    const pessoa = { nome: 'José', idade: 40 };
const { nome: nomePessoa, idade: idadePessoa } = pessoa;
console.log(nomePessoa); // 'José'
console.log(idadePessoa); // 40

  4. Dado o objeto aninhado { a: { b: { c: 42 } } }, extraia o valor de c em uma variável chamada valor.

    ✓ Resposta:
    const obj = { a: { b: { c: 42 } } };
const { a: { b: { c: valor } } } = obj;
console.log(valor); // 42

  5. Desestruture o array [ { x: 1 }, { y: 2 } ] extraindo os valores de x e y em variáveis vX e vY.

    ✓ Resposta:
    const arr = [ { x: 1 }, { y: 2 } ];
const [ { x: vX }, { y: vY } ] = arr;
console.log(vX); // 1
console.log(vY); // 2