Destructuring JavaScript: o que é e como usar

Destructuring é uma sintaxe do JavaScript que permite extrair valores de arrays ou propriedades de objetos em variáveis individuais de forma concisa. Em vez de acessar cada item por índice ou propriedade, você declara a estrutura desejada no lado esquerdo da atribuição. Esse recurso foi introduzido no ECMAScript 2015 (ES6) e se tornou padrão em praticamente todos os projetos modernos, seja no front-end ou no back-end com Node.js.

A desestruturação não elimina a necessidade de entender objetos e arrays, mas reduz a repetição e torna o código mais legível. Ela é especialmente útil ao trabalhar com APIs, funções que retornam múltiplos valores, ou ao configurar parâmetros de funções.

O que é destructuring em JavaScript?

Destructuring é uma expressão que desempacota valores de arrays ou propriedades de objetos em variáveis distintas. A sintaxe básica usa colchetes para arrays e chaves para objetos, no lado esquerdo de uma atribuição.

Exemplo com array:

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

Exemplo com objeto:

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

O nome "destructuring" vem da ideia de quebrar a estrutura original em partes menores. Isso não modifica o array ou objeto original, apenas cria novas variáveis com os valores extraídos.

Como desestruturar arrays em JavaScript?

A desestruturação de arrays segue a ordem dos elementos. Cada variável recebe o valor correspondente à sua posição.

const cores = ['vermelho', 'verde', 'azul']; const [primeira, segunda] = cores; console.log(primeira); // 'vermelho' console.log(segunda); // 'verde'

É possível ignorar elementos usando vírgulas vazias:

const [primeira, terceira] = cores; console.log(terceira); // 'azul'

Também dá para usar o operador rest para capturar o restante dos itens:

const [primeira...restante] = cores; console.log(restante); // ['verde', 'azul']

Um caso prático comum é trocar valores entre variáveis sem precisar de uma variável temporária:

let x = 1; let y = 2; [x, y] = [y, x]; console.log(x); // 2 console.log(y); // 1

Como desestruturar objetos em JavaScript?

A desestruturação de objetos usa os nomes das propriedades como referência. A ordem não importa, apenas o nome da chave.

const pessoa = { nome: 'Carlos', idade: 40, cidade: 'São Paulo' }; const { nome, idade } = pessoa; console.log(nome); // 'Carlos' console.log(idade); // 40

Você pode renomear a variável durante a desestruturação:

const { nome: nomeCompleto, cidade: local } = pessoa; console.log(nomeCompleto); // 'Carlos' console.log(local); // 'São Paulo'

Valores padrão são suportados para propriedades que podem não existir no objeto:

const { email = '[email protected]' } = pessoa; console.log(email); // '[email protected]'

Esse recurso é muito usado ao receber dados de APIs, onde o formato do objeto pode variar ou conter campos opcionais.

Para que serve o destructuring em JavaScript?

O destructuring serve para reduzir a verbosidade do código e melhorar a clareza. Em vez de escrever múltiplas linhas de atribuição manual, você extrai exatamente o que precisa em uma única linha.

Um caso comum é em funções que recebem objetos como parâmetro. Em vez de acessar obj.propriedade várias vezes, você desestrutura diretamente na assinatura da função:

function exibirUsuario({ nome, idade }) { console.log(${nome} tem ${idade} anos.); }

exibirUsuario({ nome: 'Marina', idade: 28 });

Outro uso frequente é em imports de módulos, como no React ou em bibliotecas utilitárias:

import { useState, useEffect } from 'react';

Também é útil para extrair valores de retorno de funções que devolvem arrays ou objetos, como em Object.entries() ou em funções de parsing.

Quais as diferenças entre destructuring de arrays e objetos?

A diferença principal está na forma de seleção: arrays usam posição, objetos usam nome da propriedade. Isso significa que a desestruturação de arrays é sensível à ordem, enquanto a de objetos é sensível ao nome.

Para arrays, a sintaxe usa colchetes [] e as variáveis são atribuídas na sequência dos elementos. Para objetos, usa chaves {} e as variáveis devem ter o mesmo nome da chave, a menos que você renomeie explicitamente.

Outra diferença prática: em arrays, você pode pular elementos com vírgulas vazias; em objetos, basta não declarar a propriedade que não deseja extrair.

Ambos suportam valores padrão e o operador rest, mas o comportamento do rest também difere: em arrays, ele captura os elementos restantes; em objetos, captura as propriedades restantes.

Destructuring funciona com strings e outros tipos?

Sim, destructuring pode ser aplicado a strings, que são iteráveis. Nesse caso, cada caractere é tratado como um elemento de array.

const [primeira, segunda] = 'JS'; console.log(primeira); // 'J' console.log(segunda); // 'S'

Também é possível desestruturar em parâmetros de funções, em loops for...of, e em estruturas como Map e Set, desde que sejam iteráveis ou tenham propriedades enumeráveis.

No caso de Map, a desestruturação pode extrair chave e valor diretamente:

const mapa = new Map([['chave', 'valor']]); for (const [chave, valor] of mapa) { console.log(chave, valor); }

Quais erros comuns ao usar destructuring?

O erro mais comum é tentar desestruturar null ou undefined. Se o valor for null, o JavaScript lança um TypeError, pois não é possível acessar propriedades de null.

const pessoa = null; const { nome } = pessoa; // TypeError: Cannot destructure property 'nome' of 'null'

Outro erro frequente é esquecer que a desestruturação de objetos depende do nome exato da propriedade. Se você escrever const { nomeCompleto } = pessoa e a propriedade se chama nome, a variável será undefined.

Também é comum confundir a sintaxe de arrays com a de objetos, usando chaves onde deveria usar colchetes ou vice-versa. Isso gera erros de sintaxe ou variáveis undefined.

Para evitar problemas com valores aninhados, lembre-se de que a desestruturação segue a mesma estrutura do objeto ou array original. Se a estrutura for muito profunda, pode ser mais legível usar acesso direto com ponto ou colchetes.

Destructuring é suportado em todos os navegadores?

Destructuring é suportado em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge, desde as versões lançadas após 2016. O suporte também existe no Node.js desde a versão 6.

Em navegadores antigos, como Internet Explorer 11, o destructuring não é suportado nativamente. Nesses casos, é necessário usar um transpilador como Babel para converter o código para ES5.

Na prática, para projetos web atuais, a compatibilidade não é uma preocupação relevante, mas vale verificar o público-alvo se você precisar suportar ambientes legados.

Resumo

Destructuring é uma sintaxe concisa e legível para extrair dados de arrays e objetos. Ela reduz repetição, facilita o trabalho com funções e APIs, e é amplamente suportada. Use-a para melhorar a clareza do código, mas cuidado com valores null e com a nomenclatura correta das propriedades.

Perguntas frequentes sobre destructuring em JavaScript

Destructuring modifica o array ou objeto original?

Não. A desestruturação cria novas variáveis com os valores extraídos, mas não altera a estrutura original. O array ou objeto permanece intacto após a operação.

Posso usar destructuring em parâmetros de função?

Sim, é uma das aplicações mais comuns. Você pode desestruturar diretamente na assinatura da função, o que torna o código mais limpo e evita acessos repetidos a propriedades.

Qual a diferença entre rest e spread no destructuring?

O operador rest (...) coleta o restante dos elementos ou propriedades em um novo array ou objeto. O spread (...) faz o oposto: expande elementos em uma estrutura. No destructuring, o rest é usado para capturar sobras.

Destructuring funciona com arrays aninhados?

Sim. Você pode desestruturar arrays ou objetos aninhados seguindo a mesma estrutura do valor original. Isso é útil para extrair dados de estruturas complexas, como respostas de APIs.

É possível definir valores padrão no destructuring?

Sim, tanto em arrays quanto em objetos. Basta usar o operador = após o nome da variável. O valor padrão é usado apenas se a posição ou propriedade for undefined.

Destructuring é exclusivo do JavaScript?

Não. Outras linguagens como Python, Rust e Go possuem mecanismos semelhantes para desempacotar valores, embora com sintaxes diferentes. No JavaScript, o recurso foi padronizado no ES6 e é amplamente adotado.