Desestruturação de Arrays em JavaScript
Tags: javascript, beginners, destructuring, tutorial
Published: 2024-02-22 16:34:38

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

Conteúdo:
  * [Sintaxe Básica](#basic-syntax)
  * [Pulando Valores](#skipping-values)
  * [Trocando Valores](#swapping-values)
  * [Arrays Aninhados](#nested-arrays)
  * [Valores Padrão](#default-values)

### Sintaxe Básica <a name="basic-syntax"></a>

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:

```javascript 
const numbers = [41, 27, 55];
```

Se fôssemos extrair esses dados de maneira manual, faríamos:
```javascript
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: 

```javascript
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:

```javascript
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 <a name="skipping-values"></a>

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:

```javascript
const [ a, , c ] = numbers;
```

Et voilà!


### Trocando Valores <a name="swapping-values"></a>

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`:

```javascript
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 <a name="nested-arrays"></a>

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

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

const [k, , array] = nested;
```

Com isso teremos:

```javascript
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:

```javascript
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 <a name="default-values"></a>

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

```javascript
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:

```javascript
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!

![meme da galinha - eu tenho muito a aprender](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91hsku9ezx37hgphehnq.jpg)