[JavaScript Moderno] Atribuição via Desestruturação (Destructuring Assignment)

Atribuição por Desestruturação é uma adição do ES6 que permite extrair dados a partir de arrays ou objetos e atribuir a variáveis. Essa técnica é bastante usada ao se trabalhar com props no React.js, também podemos ver a sintaxe de desestruturação implementada em outras linguagens, inclusive o C# a partir da versão 7 possui a sua implementação, chamada de Desconstrutor como pode ser conferido aqui.

O conceito do destructuring é basicamente a divisão de uma estrutura complexa em partes mais simples. Em JavaScript pode ser utilizado em Arrays e Objetos.

Desestruturando Arrays

Ante do ES6 para fazer a atribuição de diversos valores de um array em variáveis distintas era preciso fazer diversas declarações:

var skills = ['CSS','HTML','Node'];
var css = skills[0];
var html = skills[1];
var node = skills[2];

Precisávamos de uma declaração para cada atribuição. Com a sintaxe de desestruturação podemos fazer o mesmo de uma forma mais sucinta:

const skills = ['CSS','HTML','Node'];
let [css, html, node] = skills;

Também é possível fazer a desestruturação atribuindo vários elementos do array para um outro array. Vamos acrescentar mais alguns itens ao nosso array skills:

const skills = ['CSS','HTML','Node', 'C#'];

Agora a ideia é atribuir os valores ‘Node’ e ‘C#’ para um novo array chamado backend:

let [css, html, ...backend] = skills;

Ao executar o exempo podemos ver que as variáveis css e html permaneceram com seus respectivos valores, já a variável backend recebeu os valores consecutivos. Isso foi possível ao se utilizar o operador spread(os três pontos antes da variável):

Desestruturando o retorno de uma função

É possível desestruturar um array retornado por uma função. Vamos criar uma função que irá retornar alguns horários de um suposto agendamento:

function horariosAgendamento(){
  return ['08:00', '09:00', '10:00'];
}

E para fazer a desestruturação basta declarar as variáveis recebendo o retorno da função:

let [primeiraHora, segundaHora, terceiraHora] = horariosAgendamento();

Objetos

O mesmo pode ser feito com objetos, ao desestruturar um objeto pegamos suas propriedades e atribuimos a variáveis. Vamos criar um objeto pessoa:

let pessoa = {
    'nome' : 'Thiago',
    'sobrenome' : 'Reis',
    'skills' : [
        'css',
        'javascript',
        'html',
        'react',
        '.net',
    ]
};

O objeto criado é composto por três atributos, nome, sobrenome e skills. Em seguida vamos atribuir o valor de cada atributo do objeto a uma variável específica:

let { nome, sobrenome, skills } = pessoa;

Diferente da desestruturação de arrays, em objetos utilizamos chaves em vez de colchetes. Vale lembrar que o nome das variáveis deve ser o mesmo nome do atributo no objeto, caso contrário o valor das variáveis será undefined.

Post originalmente postado no meu site pessoal:  thiagoreis.dev