Destructuring em JavaScript: objetos, arrays e defaults

Destructuring em JavaScript: casamento de padrões sobre estruturas

A desestruturação (destructuring) permite escrever um padrão que espelha o formato de um objeto ou array e, em uma única linha, extrair valores por nome ou posição. Em vez de acessar propriedade por propriedade, você descreve o que quer e o JavaScript entrega.

Os dois sabores são:

As chaves fazem o match com um objeto pelo nome da propriedade. Os colchetes fazem o match com um array pela posição. Nos dois casos, as variáveis antes do = são novas declarações — você não está indexando o valor, está descrevendo um padrão que extrai as partes.

Antes do destructuring existir, esse mesmo código ficava assim:

const name = user.name;
const age = user.age;
const first = scores[0];
const second = scores[1];

Não é o fim do mundo, mas vira uma repetição chata quando você faz isso em toda função.

Desestruturação de objetos usa o nome das propriedades

No caso de objetos, os nomes dentro das chaves precisam bater com as propriedades do objeto de origem. A ordem não importa — o JavaScript faz a busca pela chave.

Quando a propriedade não existe no objeto, a variável fica como undefined — sem erro nenhum:

Esse comportamento silencioso de retornar undefined é importante ter em mente quando um errinho de digitação no nome da propriedade te deixa quebrando a cabeça às duas da manhã.

Renomeando variáveis no destructuring

Às vezes o nome da propriedade no objeto não é o nome que você quer pra variável — ou porque conflita com algo que já existe no escopo, ou porque a API usa uma convenção de nomenclatura que não te agrada. Use nomeOriginal: novoNome para renomear:

Leia como "pega a propriedade id e chama de userId." O nome da propriedade vem antes, o nome da nova variável depois dos dois-pontos. Parece anotação de tipo de outras linguagens — mas não é.

Destructuring com valor padrão

Quando uma propriedade pode não existir, já defina um valor padrão direto no próprio padrão de desestruturação:

Os valores padrão só entram em ação quando a propriedade é undefined. Já null, 0 e "" passam direto, sem acionar o default:

Essa pega muita gente. Se você quiser que null também dispare o valor padrão, precisa fazer uma checagem explícita — ou usar o operador de coalescência nula ?? depois de desestruturar.

Dá pra combinar valor padrão com renomeação:

Destructuring de arrays usa a posição

Arrays não têm nomes, apenas índices — por isso o padrão casa por posição. Use vírgulas para pular os valores que não te interessam:

As duas vírgulas no começo dizem "pula o índice 0 e o 1". Fica um pouco denso visualmente, mas quebra um galho enorme quando você só quer um valor lá do meio.

O destructuring de arrays brilha mesmo em funções que devolvem tuplas:

O mesmo padrão aparece o tempo todo nos hooks do React: const [count, setCount] = useState(0).

Rest pattern: juntando o que sobrou

Dentro de um padrão de desestruturação, ...nome reúne em uma nova variável tudo o que não foi capturado por nome ou posição.

No caso de arrays, o rest pega o final:

Já em objetos, o rest captura todas as propriedades que não foram nomeadas explicitamente:

Essa é a forma idiomática de remover um campo de um objeto sem mutá-lo — rest é um novo objeto com tudo, exceto id.

O rest precisa ser o último elemento do padrão. const [...init, last] gera erro de sintaxe.

Destructuring aninhado

Os padrões podem ser aninhados. Se uma propriedade é, ela mesma, um objeto ou array, dá para desestruturar direto na mesma expressão:

Poderoso, mas use com cautela. Três níveis de chaves aninhadas já começam a parecer um quebra-cabeça. Quando chegar nesse ponto, extraia valores intermediários para variáveis próprias — legibilidade vale mais do que esperteza.

Uma pegadinha: data: { user } no padrão não cria uma variável chamada data. Isso é uma instrução dizendo "entre em data e continue desestruturando". Se você precisa do próprio data, adicione separadamente:

Desestruturação nos parâmetros de função

O lugar onde você mais vai usar destructuring no dia a dia é na lista de parâmetros de uma função. Isso transforma aquele clássico "passa um objeto de opções" numa assinatura que já se documenta sozinha:

No ponto da chamada, parece uma função comum que recebe um objeto de opções. Só que, dentro da função, você já ganha variáveis nomeadas com valores padrão — chega daquele options.name || "default" repetido toda hora.

Tem uma pegadinha: chamar essa função sem argumento quebra tudo, porque não dá pra desestruturar undefined. A solução é dar um valor padrão pro parâmetro inteiro:

O = {} depois do padrão diz o seguinte: "se nenhum argumento for passado, finge que veio um objeto vazio". A partir daí, os valores padrão internos assumem o controle.

Trocando e reatribuindo valores

O destructuring também funciona com variáveis já declaradas, mas é preciso envolver o padrão do objeto em parênteses (caso contrário, o JavaScript interpreta o { como o início de um bloco):

O swap de arrays fica limpo demais. Já reatribuir objetos é mais raro, mas vale guardar o truque dos parênteses para quando precisar.

Um exemplo do mundo real

Juntando boa parte do que vimos até aqui — uma função que processa uma resposta de API:

Cada camada desestruturada tem um valor padrão, então a função sobrevive a dados incompletos sem uma pilha de if para proteger cada caso. Esse é o ganho de verdade: assinaturas ao mesmo tempo precisas e tolerantes.

Próximo passo: spread de objetos

A desestruturação tira valores de dentro de objetos. Já o spread faz o oposto — copia, mescla e sobrescreve. Os dois andam juntos no JavaScript moderno, e o spread é o nosso próximo tema.