Como desestruturar um Array no JavaScript

Vinícius Lucena — Mon, 16 May 2022 20:33:09 +0000

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

Minhas extensões no VS Code

Vinícius Lucena — Fri, 13 May 2022 13:28:36 +0000

Temas

Dracula Official - O clássico e mais amado tema.

OM Theme (A Darker Dracula Theme) - Uma alternativa ao Dracula, só que mais escura.

Extensões

Auto Rename Tag - Me ajuda muito na produtividade, pois quando preciso alterar alguma tag ele altera tanto a de abertura como a de fechamento.

Color Highlight - Muito bom para visualizar a cor de um código HEX no código.

DotENV - Ajuda muito na hora de gerar um arquivo .env no código.

EditorConfig for VS Code - Gera automaticamente o arquivo .editorconfig para podermos definir padrões para o código, independente de editor/IDE que cada membro da equipe usa.

ESLint - Gera o arquivo .eslintrc de forma fácil e automática.

GitLens — Git supercharged - Adiciona algumas funções do Git dentro do VS Code.

Live Server - Cria um servidor de desenvolvimento local com live reload.

Material Icon Theme - Muda os ícones de arquivos/pastas do VS Code para o padrão Material.

Polacode - Ótimo para gerar imagens de códigos para posts, por exemplo.

Prettify JSON - Deixa os arquivos do tipo JSON mais bonitos e de melhor visualização.

Thunder Client - Uma ótima alternativa ao Insomnia/Postman dentro do próprio VS Code.

Turbo Console Log - Ajuda muito na hora do debug gerando logs automaticamente.