Atribuição via Desestruturação em JavaScript
Aprenda desestruturação em JavaScript: desempacote arrays e objects, defina valores padrão, renomeie variáveis, use padrões aninhados e rest, troque variáveis e desestruture parâmetros de funções.
Entendendo a Desestruturação em JavaScript
A atribuição via desestruturação é uma sintaxe que permite desempacotar valores de arrays ou propriedades de objects em variáveis distintas em uma única instrução compacta. Introduzida no ES6 (ES2015), ela substitui o acesso repetitivo propriedade por propriedade e torna o código que trabalha com dados estruturados muito mais fácil de ler.
Sem desestruturação, você escreve um código assim:
Com desestruturação, a mesma intenção cabe em uma linha. O restante deste capítulo aborda as formas de array e object, valores padrão, renomeação, padrões aninhados, o padrão rest, troca de variáveis, desestruturação em parâmetros de função e o problema comum com ({ a } = {}).
Desestruturação de Arrays: Desempacotando Elementos
A desestruturação de arrays atribui elementos de um array a variáveis distintas com base em sua posição (índice). As variáveis à esquerda espelham a ordem dos valores à direita. É especialmente útil para valores de retorno de funções e para iterar sobre pares chave/valor.
Desestruturação Básica de Arrays
Uma variável sem elemento correspondente se torna undefined, e é aí que entram os valores padrão (abaixo).
Ignorando Elementos e Valores Padrão
Deixe um "buraco" (uma posição vazia entre vírgulas) para ignorar elementos desnecessários. Adicione = valor para dar a uma variável um valor alternativo que é usado apenas quando o valor desempacotado for undefined:
Como a desestruturação funciona em qualquer iterável, ela se combina naturalmente com o padrão rest para coletar os itens restantes:
Desestruturação de Objects: Extraindo Propriedades
A desestruturação de objects oferece uma forma conveniente de extrair múltiplas propriedades de objects. Essa técnica pode aprimorar o gerenciamento de objects de configuração ou o processamento de dados de estruturas complexas.
Desestruturação Simples de Objects
Ao contrário dos arrays, a desestruturação de objects faz correspondência pelo nome da propriedade, não pela posição, portanto a ordem das chaves no padrão não importa.
Renomeando Variáveis e Definindo Valores Padrão
Use a sintaxe nomeDaPropriedade: novoNome para atribuir uma propriedade a uma variável com um nome diferente — útil quando o nome da propriedade conflita com uma variável existente ou não é um identificador válido. Os valores padrão funcionam da mesma forma que com arrays:
Você pode renomear e fornecer um valor padrão ao mesmo tempo com propriedade: novoNome = padrão:
Técnicas Avançadas de Desestruturação
A desestruturação avançada abrange estruturas aninhadas e o uso do parâmetro rest para agregar propriedades ou elementos restantes.
Desestruturação Aninhada
Os padrões podem ser aninhados para acessar objetos e arrays em profundidade de uma só vez. A forma do padrão simplesmente espelha a forma dos dados:
Observe que size: e items: aqui não são variáveis — eles são apenas o caminho para dentro da estrutura. Somente width, height, item1 e item2 se tornam variáveis.
Usando o Padrão Rest
O padrão rest (...nome) reúne todas as propriedades restantes não desestruturadas em um novo object. Leia mais em Parâmetros Rest e Sintaxe Spread:
Aplicações Práticas da Desestruturação
A desestruturação se mostra inestimável em diversas aplicações práticas, como:
- Troca de Variáveis: Simplifica o processo de troca de valores entre variáveis.
- Gerenciamento de Parâmetros de Função: Aprimora o tratamento de múltiplos parâmetros, especialmente em funções com muitos parâmetros opcionais.
Trocando Variáveis
A desestruturação troca dois valores sem precisar de uma variável temporária. O array do lado direito é construído primeiro e depois desempacotado nas variáveis do lado esquerdo:
Parâmetros de Função
Desestruturar um parâmetro permite que uma função aceite um "object de opções" e extraia configurações nomeadas com valores padrão sensatos — muito mais limpo do que uma longa lista de parâmetros sensível à ordem. O = {} no final é o que permite ao chamador omitir o argumento completamente:
Saiba mais sobre parâmetros no capítulo Funções JavaScript.
O Problema com ({ a } = {})
Ao desestruturar uma variável já existente (não em uma declaração const/let), você deve envolver a instrução entre parênteses. Caso contrário, o JavaScript interpreta o { inicial como o início de um bloco de código, não de um padrão de object, e lança um erro de sintaxe:
Os parênteses só são necessários para a desestruturação de objects em variáveis já declaradas. A desestruturação de arrays ([a, b] = [1, 2]) não tem esse problema porque [ nunca inicia um bloco de instrução.
Uma armadilha relacionada: quando tanto a variável quanto seu valor padrão vêm de uma fonte possivelmente ausente, forneça ao parâmetro inteiro um padrão {} (como em drawChart acima). Sem isso, chamar a função sem argumento lança um erro, pois não é possível ler uma propriedade de undefined.
Conclusão
A desestruturação em JavaScript é um recurso poderoso que proporciona código mais legível, conciso e de fácil manutenção. Ao adotar essa abordagem, os desenvolvedores podem lidar de forma eficiente com a extração de dados de arrays e objects, resultando em estruturas de código mais limpas e eficazes.