O JavaScript moderno tem muitos novos recursos que facilitam a escrita de código de maneira simples e estruturada. Um dos recursos modernos úteis disponíveis no ES6+ é a desestruturação de arrays e objetos.
Estruturas de JavaScript como React.js e Angular incentivam o uso dessa técnica. Portanto, é essencial entender o que é a desestruturação e como usá-la ao escrever o código.
O que é desestruturação de objetos e matrizes em JavaScript?
A desestruturação em JavaScript refere-se ao processo de desempacotar valores de uma matriz ou objeto. Ele fornece uma maneira mais concisa de obter valores de arrays ou objetos sem trabalho pesado quando você está interessado em itens de array individuais ou valores em um objeto.
Também é útil ao processar valores de retorno de uma função ou expressão complexa. Este conceito é um dos melhores práticas que você deve seguir ao escrever código React.
Como desestruturar arrays
Aqui está um exemplo de código para ter uma noção da desestruturação de array:
const arr = [1, 2];
const [a, b] = arr;
console.log (a) // imprime 1 no console
console.log (b) // imprime 2 no console
Este código usa a desestruturação para atribuir os valores de arr—1 e 2—para as variáveis a e b, respectivamente. Este é o conceito fundamental por trás da desestruturação. Você tem uma matriz ou objeto no lado direito e desempacota itens e os atribui a variáveis individuais no lado esquerdo.
Nos bastidores, o JavaScript copia valores de arr e as atribui às variáveis do lado esquerdo da seguinte forma:
const arr = [1,2];
const a = arr[0];
const b = arr[1];
Como você pode ver, a desestruturação é uma maneira mais concisa de fazer isso, ao contrário de usar a notação de objeto ou colchetes. No entanto, essa sintaxe provavelmente será útil ao trabalhar com arrays complexos ou funções que retornam arrays ou strings.
Verifique o código de exemplo abaixo:
const [dia, mês, data, ano, hora, fuso horário] = Data().dividir(' ')
// A chamada de Date() retorna a data atual no formato:
// Seg, 20 de fevereiro de 2023 13:07:29 GMT+0000
console.log (dia) // imprime seg
console.log (mês) // imprime fevereiro
console.log (data) // imprime 20
Neste exemplo de código, estamos criando uma nova string com a data atual chamando Data(). A seguir, usamos dividir(), a método de string JavaScript, para separar itens na string usando espaço como separador. dividir(' ') retorna uma matriz e usamos a desestruturação para atribuir os valores a variáveis individuais.
Lembre-se de que, se sua matriz contiver mais itens do que você está descompactando, o JavaScript ignorará os itens extras.
const arr = [1, 2, 3, 4];
const [a, b] = arr;
console.log (a) // imprime 1
console.log (b) // imprime 2
// os valores 3 e 4 não são atribuídos a nenhuma variável; eles são ignorados
Nesse caso, se você quiser armazenar os itens restantes em uma variável, use um parâmetro rest da seguinte forma:
const arr = [1, 2, 3, 4];
const [a, b, ...descanso] = arr;
console.log (resto) // imprime [3,4]
Às vezes, você pode não se importar com um item específico. O padrão de desestruturação do JavaScript também permite pular certos elementos usando uma vírgula vazia.
const arr = [1, 2, 3, 4];
const [a,, c] = arr;
console.log (c) // imprime 3
O código acima usa o espaço vazio para ignorar o valor 2 na matriz arr. Em vez de atribuir valor 2 para variável c, ele pula para o próximo item na matriz. Ele também ignora o quarto valor porque não especifica uma variável para armazená-lo.
Por outro lado, se você precisar de menos itens do que está desempacotando, o processo atribuirá o indefinido valor para essas variáveis extras.
const arr = [1];
const [a, b] = arr;
console.log (a) // imprime 1
console.log (b) // imprime indefinido
Para evitar variáveis indefinidas, você pode definir valores padrão se não tiver certeza sobre o comprimento da matriz da seguinte maneira (atribuir valores padrão não é um requisito):
const arr = [1];
const [a = '10', b = 'não fornecido'] = ar;
console.log (a) // imprime 1
console.log (b) // imprime "não fornecido"
Essa desestruturação atribui o valor 1 para variável a, substituindo seu valor padrão. Variável b mantém seu padrão porque um valor não é fornecido.
Como Desestruturar Objetos
Desestruturar objetos não é tão diferente de arrays. A única diferença é que os arrays são iteráveis e os objetos não, resultando em uma maneira ligeiramente diferente de fazer as coisas.
Ao trabalhar com objetos, as variáveis do lado esquerdo do operador de atribuição também são inicializadas como objetos:
const pessoa = {nome: 'Alvin', idade: 10, altura: 1};
const {nome, idade, altura} = pessoa;
console.log (nome) // imprime 'Alvin'
console.log (altura) // imprime 1
No código, estamos usando nomes de propriedade do pessoa objeto. No entanto, você não precisa usar os nomes de propriedade exatos no objeto. Você pode desestruturar e armazenar os valores em diferentes nomes de variáveis da seguinte forma:
const pessoa = {nome: 'Alvin', idade: 10, altura: 1};
const {nome: primeiro nome, idade: anos, altura: alturaatual} = pessoa;
console.log (primeiroNome) // imprime 'Alvin'
console.log (alturaatual) // imprime 1
Você começa especificando o valor da propriedade que deseja desestruturar e, em seguida, especifica o nome da variável que usará para armazenar o valor após dois pontos. E como arrays, desestruturar um nome de propriedade que não existe será indefinido.
Para lidar com isso, você pode especificar valores padrão de forma semelhante caso o nome da propriedade que deseja atribuir a uma variável não esteja disponível:
const pessoa = {nome: 'Alvin', idade: 10, altura: 1};
const {nome, idade, altura, localização='Mundialmente'} = pessoa;
console.log (nome) // imprime 'Alvin'
console.log (localização) // imprime 'Mundial'
A ordem das variáveis no lado esquerdo não importa com um objeto, pois os objetos armazenam valores em pares chave-valor. Assim, o código a seguir produzirá os mesmos resultados:
const pessoa = {nome: 'Alvin', idade: 10, altura: 1};
const {idade, altura, nome} = pessoa;
console.log (nome) // imprime 'Alvin'
console.log (altura) // imprime 1
Por fim, semelhante aos arrays, você também pode usar o parâmetro rest para desestruturar vários valores em uma variável da seguinte forma:
const pessoa = {nome: 'Alvin', idade: 10, altura: 1};
const {nome, ...resto} = pessoa;
console.log (nome) // imprime 'Alvin'
console.log (resto) // imprime { idade: 10, altura: 1 }
Apenas observe que o parâmetro rest deve sempre vir por último. Caso contrário, o JavaScript lançará uma exceção.
Melhore a qualidade do seu código com a desestruturação do JavaScript
Os recursos modernos do Javascript, como a desestruturação, permitem que você escreva um código altamente legível. Usando a desestruturação, você pode desempacotar rapidamente valores de arrays e objetos. A desestruturação também pode ser útil em outras situações, como trocar valores de duas variáveis. Espero que agora você entenda o que significa desestruturação em JavaScript e possa usá-la enquanto escreve código.
