Tem dúvidas de como funciona a desestruturação de arrays? Então vem comigo!

Conteúdo:

• Sintaxe Básica
• Pulando Valores
• Trocando Valores
• Arrays Aninhados
• Valores Padrão

Sintaxe Básica

Desestruturação é uma maneira simples de extrair dados de arrays ou objetos em variáveis separadas. Vamos dar uma olhada em como funciona a desestruturação de arrays.

Tomemos o array abaixo como exemplo:

const numbers = [41, 27, 55];

Se fôssemos extrair esses dados de maneira manual, faríamos:

const a = numbers[0]; 
const b = numbers[1];
const c = numbers[2];

Legal... mas bastante repetitivo também, né?

Graças aos deuses da programação, em 2015, o ES6 trouxe a desestruturação e agora podemos extrair esses dados de uma maneira bem mais concisa e simples. Esta é a sintaxe básica da desestruturação:

const [ a, b, c ] = numbers;

Aqui, fizemos a mesma coisa que o código acima: declaramos três variáveis, e atribuímos a elas os valores do array numbers.

Agora, podemos trabalhar com os valores do array separadamente:

console.log(a); // output: 41
console.log(b); // output: 27
console.log(c); // output: 55

Mas e se não quisermos extrair todos os dados do array? Segue abaixo!

Pulando Valores

O motivo pelo qual precisamos pular valores na desestruturação de arrays é que, diferentemente dos objetos, os arrays seguem uma ordem. Assim, toda vez que não quisermos extrair um valor de um array, temos que sinalizar isso ao programa. Fazemos isso omitindo a variável que estaria lá (mas deixando as vírgulas e espaços), ou seja, isto , b, se transforma nisto , ,.

Usando o exemplo acima, se não quisermos extrair o valor 27 do array, faremos:

const [ a, , c ] = numbers;

Et voilà!

Trocando Valores

A desestruturação nos permite trocar os valores entre variáveis sem ter que criar uma variável temporária. Veja o antes e depois da troca dos valores entre a e c:

console.log(a, c); //  output: 41 55

[a, c] = [c, a];

console.log(a, c); //  output: 55 41

Quer coisa mais simples que isso? Agora você tem uma opção menos custosa em termos de desempenho para fazer a troca de valores entre variáveis!

Arrays Aninhados

Mas e se tivermos um array dentro de um array? Também é possível fazermos a desestruturação:

const nested = [47, 5, [2, 1]];

const [k, , array] = nested;

Com isso teremos:

console.log(k); // output: 47
console.log(array); // output: [2, 1]

Também podemos fazer uma desestruturação dentro da desestruturação. Considerando o mesmo array acima:

const [m, , [n, o]] = nested;

console.log(m); // output: 47
console.log(n); // output: 2
console.log(o); // output: 1

Além disso, pode a desestruturação criar mais variáveis do que o número de elementos dentro do array? Sim! Segue comigo!

Valores Padrão

É possível criar mais variáveis do que elementos existentes no array. No entanto, a princípio, eles terão o valor de undefined:

const [a, b, c] = [2, 3]

console.log(a, b, c); // output: 2 3 undefined 

O que fazer para evitar isso? Junto com a desestruturação, podemos estabelecer valores padrão! Veja:

const [a = 1, b = 1, c = 1] = [2, 3]

console.log(a, b, c); // output: 2 3 1 

Assim, evitamos bugs no nosso código em razão do undefined. Além disso, estabelecer valores padrão torna o nosso código mais robusto e confiável.

E é isso por hoje! Obrigada por chegar até aqui! =)

Comenta aqui embaixo o que achou para que eu me aprimore!