Como desestruturar um Array no JavaScript
Tags: javascript, beginners, tutorial, programming
Published: 2022-05-16 20:33:09

A sintaxe da atribuição via desestruturação é uma expressão JavaScript que possibilita descompactar valores de arrays ou propriedades de objetos em variáveis distintas. Ou seja, podemos extrair os dados do array e atribuir esses valores a variáveis de forma mais simples e menos verbosa.

## Desestruturando Arrays

Antes de tudo, vamos criar um array com três posições e vamos adicionar os valores Cachorro, Gato e Cavalo.

```
const animais = ['Cachorro', 'Gato', 'Cavalo']
```

Agora, digamos que eu queira criar uma variável com o valor Gato que está dentro do array que criamos. Antes da desestruturação nós teriámos que fazer desse jeito:

```
const gato = animais[1]
```

E se quisermos pegar os valores Cachorro e Cavalo, seguindo a mesma lógica acima, teríamos que fazer:

```
const cachorro = animais[0]
const cavalo = animais[2]
```

Desse jeito nós tivemos que escrever 3 linhas de código apenas para pegar os valores de dentro do array. Agora usando a desestruturação nós vamos ver como que fica bem mais 
simples.

## Como a desestruturação funciona

Com a desestruturação, nós podemos escrever apenas 1 linha de código:

```
const [primeiroAnimal, segundoAnimal, terceiroAnimal] = animais
```

A desestruturação pega cada uma das variáveis do array lado esquerdo e relaciona com o valor de mesmo índice no array `animais`

Quando escrevemos `primeiroAnimal` no array a esquerda, nós estamos dizendo que queremos acessar o primeiro elemento de `animais` e atribuir o valor dela a variável `primeiroAnimal`.

O mesmo vale para `segundoAnimal` e `terceiroAnimal`, estamos pegando o valor do elemento na segunda e terceira posição de `animais`, respectivamente.

**Note que o importante aqui não é o nome da variável, mas a ordem em que está declarada!** 

Se observarmos a ordem das variáveis no array a esquerda com as posições de `animais`, podemos dizer que:

```
primeiroAnimal = animais[0]
segundoAnimal = animais[1]
terceiroAnimal = animais[2]
```

Ao desestruturar um array, podemos dar às nossas variáveis ​​o nome que quisermos. Mais uma vez, a ordem é o que importa, não o nome. Se quiséssemos, poderíamos escrever:

```
const [cachorro, gato, cavalo] = animais
```

Agora temos todos os nossos valores de `animais` armazenados em suas respectivas variáveis. Se conferirmos os valores, ficaria assim:

```
console.log(cachorro) // retorna Cachorro
console.log(gato) // retorna Gato
console.log(cavalo) // retorna Cavalo
```
Mas e se quiser pegar apenas um elemento do array, ou pegar o elemento na segunda ou terceira posição e armazenar esse elemento em uma variável?

## Como desestruturar o segundo ou o terceiro elemento de um Array?

E se a gente quiser pegar o valor de Gato no array `animais` é só escrever `const [gato] = animais`, certo?

Errado, pois desse jeito nós estariamos pegando o valor do primeiro elemento de `animais`, ou seja, gato receberia Cachorro.

Esse não é o resultado esperado. Então o que podemos fazer?

Ao invés disso, podemos usar o código:

```
const [, gato] = animais
```

Isso ocorre porque a vírgula serve como um placeholder para o elemento anterior. Ou seja, estamos dizendo ao JavaScript que o primeiro elemento existe e está lá, mas não estamos atribuindo a nenhuma variável, somente a segunda posição de `animais` está sendo atribuida a variável gato.

Uma última coisa para quem estuda React é notar que a sintaxe de uso do `useState` é nada mais que uma desestruturação de um array.

```
const [variable, setVariable] = useState(0)
```

Espero que esse meu post tenha ajudado você a entender um pouco mais da desestruturação de Array. Obrigado! :)

Instagram: @lucena.dev