Tem dúvidas de como funciona a desestruturação de arrays? Então vem comigo!
Conteúdo:
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!
Top comments (2)
vim do seu outro aetigo, gostei bastante desse também, o engraçado é que eu também escrevi um artigo sobre isso uns tempos atrás, se quiser ler
Que legal! Obrigada pelo elogio… Curti o seu também! É bom ver mais de uma forma de explicar um assunto.