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