Desestruturação de arrays

1. Introdução à Desestruturação de Arrays

A desestruturação (destructuring) é um recurso poderoso do JavaScript moderno que permite extrair valores de arrays e objetos de forma concisa e expressiva. Em vez de acessar elementos manualmente por seus índices, você pode "desempacotar" os valores diretamente em variáveis nomeadas.

Sintaxe básica:

const frutas = ['maçã', 'banana', 'laranja'];
const [primeira, segunda, terceira] = frutas;

console.log(primeira); // 'maçã'
console.log(segunda);  // 'banana'
console.log(terceira); // 'laranja'

Comparação com a forma tradicional:

// Abordagem tradicional
const frutas = ['maçã', 'banana', 'laranja'];
const primeira = frutas[0];
const segunda = frutas[1];
const terceira = frutas[2];

// Com desestruturação
const [primeira, segunda, terceira] = frutas;

A diferença é clara: menos código, mais legibilidade e intenção explícita.

2. Atribuição Básica e Ignorando Elementos

Você pode extrair apenas os elementos que precisa, ignorando outros com vírgulas vazias:

const numeros = [10, 20, 30, 40, 50];

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

// Ignorando múltiplos elementos
const [primeiro, , , , quinto] = numeros;
console.log(primeiro); // 10
console.log(quinto);   // 50

Extraindo o restante com operador spread:

const [primeiro, segundo, ...restante] = [1, 2, 3, 4, 5];
console.log(primeiro); // 1
console.log(segundo);  // 2
console.log(restante); // [3, 4, 5]

3. Valores Padrão (Default Values)

Quando um elemento do array é undefined, você pode definir um valor padrão:

const [a = 10, b = 20] = [1];
console.log(a); // 1 (valor do array)
console.log(b); // 20 (valor padrão, pois array[1] é undefined)

// Comportamento com null
const [x = 'padrão', y = 'padrão'] = [null, undefined];
console.log(x); // null (null não é undefined, então o valor padrão não é aplicado)
console.log(y); // 'padrão' (undefined ativa o valor padrão)

Importante: O valor padrão só é usado quando o elemento é estritamente undefined. Valores como null, 0 ou '' são mantidos.

4. Trocando Variáveis (Swapping)

Uma das aplicações mais elegantes da desestruturação é a troca de valores entre variáveis sem necessidade de variável temporária:

let a = 1;
let b = 2;

// Troca em uma única linha
[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

Uso prático em algoritmos de ordenação:

function bubbleSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

console.log(bubbleSort([5, 3, 8, 1, 2])); // [1, 2, 3, 5, 8]

5. Desestruturação Aninhada (Nested Arrays)

Arrays podem conter outros arrays, e a desestruturação pode extrair valores em qualquer profundidade:

const dados = [[1, 2], [3, 4], 5];

// Extraindo valores aninhados
const [[a, b], [c, d], e] = dados;
console.log(a, b, c, d, e); // 1 2 3 4 5

// Combinando com objetos aninhados
const matriz = [
  { id: 1, valores: [10, 20] },
  { id: 2, valores: [30, 40] }
];

const [{ valores: [v1, v2] }, { valores: [v3, v4] }] = matriz;
console.log(v1, v2, v3, v4); // 10 20 30 40

6. Desestruturação em Parâmetros de Função

Receber arrays como argumentos desestruturados torna as funções mais expressivas:

// Função que soma dois primeiros elementos
function soma([a, b]) {
  return a + b;
}

console.log(soma([5, 3])); // 8

// Com valores padrão e rest parameters
function processar([primeiro = 0, segundo = 0, ...restante]) {
  console.log('Primeiro:', primeiro);
  console.log('Segundo:', segundo);
  console.log('Restante:', restante);
  return primeiro + segundo + restante.reduce((acc, val) => acc + val, 0);
}

console.log(processar([1, 2, 3, 4, 5])); 
// Primeiro: 1
// Segundo: 2
// Restante: [3, 4, 5]
// Resultado: 15

7. Uso Prático em Node.js e React

Node.js: Processamento de tuplas com Object.entries()

const usuario = {
  nome: 'Maria',
  idade: 28,
  cidade: 'São Paulo'
};

// Object.entries retorna arrays [chave, valor]
for (const [chave, valor] of Object.entries(usuario)) {
  console.log(`${chave}: ${valor}`);
}
// nome: Maria
// idade: 28
// cidade: São Paulo

// Processamento de dados de arquivos CSV
const linhas = ['João,30,RJ', 'Ana,25,SP'];
const dados = linhas.map(linha => {
  const [nome, idade, estado] = linha.split(',');
  return { nome, idade: parseInt(idade), estado };
});
console.log(dados);
// [
//   { nome: 'João', idade: 30, estado: 'RJ' },
//   { nome: 'Ana', idade: 25, estado: 'SP' }
// ]

React: Extraindo dados de hooks

import React, { useState, useEffect } from 'react';

function Contador() {
  // useState retorna um array [valor, setter]
  const [contador, setContador] = useState(0);
  const [nome, setNome] = useState('');

  // useEffect com desestruturação de array
  const [dados, setDados] = useState([]);

  useEffect(() => {
    fetch('https://api.exemplo.com/dados')
      .then(res => res.json())
      .then(([primeiro, ...restante]) => {
        setDados(restante);
        console.log('Primeiro item ignorado:', primeiro);
      });
  }, []);

  return (
    <div>
      <p>Contagem: {contador}</p>
      <button onClick={() => setContador(c => c + 1)}>+</button>
    </div>
  );
}

React: Manipulação de props e state

function ListaItens({ itens }) {
  // Desestruturando o primeiro e último item
  const [primeiro, ...restante] = itens;
  const ultimo = restante.pop();

  return (
    <ul>
      <li className="destaque">{primeiro}</li>
      {restante.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
      <li className="final">{ultimo}</li>
    </ul>
  );
}

// Uso em um componente pai
function App() {
  const [lista, setLista] = useState(['A', 'B', 'C', 'D']);

  // Trocando posições com desestruturação
  const trocarPrimeiroEUltimo = () => {
    setLista(prev => {
      const [primeiro, ...meio] = prev;
      const ultimo = meio.pop();
      return [ultimo, ...meio, primeiro];
    });
  };

  return (
    <div>
      <ListaItens itens={lista} />
      <button onClick={trocarPrimeiroEUltimo}>Inverter extremos</button>
    </div>
  );
}

A desestruturação de arrays é uma ferramenta fundamental no desenvolvimento moderno com JavaScript, Node.js e React. Ela reduz boilerplate, aumenta a legibilidade e torna o código mais declarativo. Domine esse padrão e você escreverá código mais limpo e eficiente em todos os seus projetos.

Referências