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
Top comments (2)
I loved
Thank's!