Desestruturação de objetos e arrays em Javascript

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. Isto significa, que podemos extrair dados de arrays ou objetos, e atribuir estes dados à variáveis.

Você pode ser perguntar, para que vou fazer isso? ou como isso me ajuda? Bom para responder sua pergunta, vamos ver os exemplos abaixo.

Desestruturando Arrays

const lista = ['Gabriel', 'Asakawa', 'Brasil']
const nome = lista[0] // Gabriel
const sobrenome = lista[1] // Asakawa
const pais = lista[2] // Brasil

console.log(nome, sobrenome, pais) // Gabriel Asakawa Brasil

No código acima, usei uma forma de extrair elementos de um array que funciona e era muito utilizada, porém veja que devo indicar a posição de cada elemento do array em uma linha diferente. Isto torna o código mais verboso.

Utilizando a desestrutração o código pode ser reduzido, veja algums cenários.

Básico

const lista = ['Gabriel', 'Asakawa', 'Brasil']
const [nome, sobrenome, pais] = lista

console.log(nome, sobrenome, pais) // Gabriel Asakawa Brasil

Utilizando a funcionalidade de desestrutração do JS, o código tem menos linhas e é mais fácil de ler.

Pulando elementos do array

const lista = ['Gabriel', 'Asakawa', 'Brasil', 'São Paulo']
const [nome, , pais, estado] = lista

console.log(nome, pais, estado) // Gabriel Brasil São Paulo

Veja que o array que recebe a atribuição tem uma vírgula sobrando. Na verdade não está sobrando, ela representa a posição do elemento do array que não queriamos extrair (que foi pulado).

Valores default

Podemos atribuir um valor default a uma variável, no caso em que o valor extraído do array é undefined.

const [a, b = 7] = [1]

console(a, b) // 1 7

Usando o operador (...)

Quando é necessário atribuir a uma variável um elemento do array e a outra variável o resto dos elementos do mesmo array, podemos utilizar o operador (...).

const lista = ['Gabriel', 'Pai', 'Desenvolvedor', 'Nerd']
const [nome, ...outros] = lista

console.log(nome) // Gabriel
console.log(outros) // ['Pai', 'Desenvolvedor', 'Nerd']

Desestruturando Objetos

A desestrutração de um objeto é similar à do array, a diferença é o uso de chaves { } no lugar de colchetes [ ].

const pessoa = {
    nome: 'Gabriel',
    sobrenome: 'Asakawa',
    pais: 'Brasil'
}
const nome = pessoa.nome // Gabriel
const sobrenome = pessoa.sobrenome // Asakawa
const pais = pessoa.pais // Brasil

console.log(nome, sobrenome, pais) // Gabriel Asakawa Brasil

No código acima, usei uma forma de extrair elementos de um objeto que funciona bem, mas o código é verboso e repetitivo. Então mais uma vez podemos utilizar a desestrutração e o código pode ser reduzido, veja algums cenários.

Básico

const pessoa = {
    nome: 'Gabriel',
    sobrenome: 'Asakawa',
    pais: 'Brasil'
}
// correto
const {nome, sobrenome, pais} = pessoa
console.log(nome, sobrenome, pais) // Gabriel Asakawa Brasil

// incorreto
const {nome, sobre, pais} = pessoa
console.log(nome, sobre, pais) // Gabriel undefined Brasil

Na desestrutração de objetos direta, o nome da variável que irá receber o valor da propriedade do objeto, deve ser igual ao nome da propriedade do objeto. Caso contrário a atribuição do valor não será feita.

Objetos aninhados

const pessoa = {
    nome: 'Gabriel',
    sobrenome: 'Asakawa',
    pais: 'Brasil',
    endereco : {
        rua: 'Av Paulista',
        cep: '00000-000'
    }
}
const {nome, sobrenome, endereco: {rua, cep}} = pessoa

console.log(nome, sobrenome, rua, cep) // Gabriel Asakawa Av. Paulista 00000-000 

Nomes de variáveis diferentes

Como falei antes, na hora de desestrutrar um objeto de forma direta, o nome da variável que irá receber o valor da proprieade do objeto deve ser igual, porém é possível usar outro nome de variável caso seja necessário.

const pessoa = {
    nome: 'Gabriel',
    sobrenome: 'Asakawa',
    pais: 'Brasil'
}
const {nome, sobrenome: lastname} = pessoa

console.log(nome, lastname) // Gabriel Asakawa

Outro casos de uso, podem ser vistos aqui.

Conclusão

Utilizar a desestrutração, ajuda a reduzir linhas de código e permite que o código seja mais legível. Além disso é possível também extrair somente os dados de um array ou objeto, que realmente são necessários naquele momento.

Se tiver dúvidas, elogios, sugestões, deixe seu comentário. Se também curtiu o conteúdo, compartilhe com os seus amigos.