Entenda  #Array #Destructuring de uma vez por todas. Com exemplos.

Array destructuring é como uma forma inteligente de "desempacotar" valores de um #array em #JavaScript .

Imagine que você tem uma caixa com vários itens dentro. Normalmente, para pegar cada item, você precisaria abrir a caixa e retirar um por um. O array #destructuring permite retirar vários itens de uma vez e dar um nome para cada um deles.

Exemplo básico:

Sem destructuring:

const cores = ["vermelho", "azul", "verde"];
const cor1 = cores[0];
const cor2 = cores[1];
const cor3 = cores[2];

Com destructuring:

const cores = ["vermelho", "azul", "verde"];
const [cor1, cor2, cor3] = cores;

Ambos fazem a mesma coisa: cor1 recebe "vermelho", cor2 recebe "azul" e cor3 recebe "verde". Mas com destructuring, a escrita é muito mais simples e direta.

Outros truques úteis:

Ignorar alguns elementos:

const [primeiro, , terceiro] = ["maçã", "banana", "laranja"];
// primeiro = "maçã", terceiro = "laranja", o segundo item foi pulado

Usar o operador rest (...) para capturar o resto:

const [chefe, ...funcionarios] = ["Maria", "João", "Pedro", "Ana"];
// chefe = "Maria", funcionarios = ["João", "Pedro", "Ana"]

Valores padrão (se o array não tiver valores suficientes):

const [a, b, c = "valor padrão"] = ["item1", "item2"];
// c recebe "valor padrão" porque não existe terceiro elemento no array

Resumindo.

É como se você estivesse criando uma "forma" com o mesmo formato do array, e cada espaço dessa forma recebe automaticamente o valor correspondente do array original. Isso torna o código mais legível e evita a repetição de acessar elementos por índices como array[0], array[1], etc.