Pílulas de JavaScript: desestruturação

Photo by Florian Klauer

[click here for English]

Este é um post de uma série na qual compartilho alguns aprendizados da minha jornada no JavaScript no formato de mini artigos. Veja os posts anteriores no meu perfil!

O ES6 trouxe uma nova forma de extrair dados de arrays e objetos para diferentes variáveis chamada desestruturação (ou destructuring). Antes dele, a extração de um array era feita assim:

const ages = [14, 28, 47];

const age1 = ages[0];
const age2 = ages[1];
const age3 = ages[2];

console.log(age1, age2, age3);
// 14 28 47

E a extração de um objeto, assim:

const person = {
  name: 'Barbara',
  age: 36,
  job: 'Developer'
};

const name = person.name;
const age = person.age;
const job = person.job;

console.log(name, age, job);
// Barbara 36 Developer

A desestruturação realiza a mesma tarefa, porém de uma forma mais simples e enxuta. Vamos voltar e refatorar o primeiro exemplo usando essa técnica:

const ages = [14, 28, 47];

const [age1, age2, age3] = ages;

console.log(age1, age2, age3);
// 14 28 47

Wow, transformamos três linhas de código em uma só!

Observe a sintaxe da segunda linha, que é onde acontece a desestruturação de fato. Do lado esquerdo, usamos colchetes para indicar que estamos desestruturando um array; ali mesmo, declaramos três variáveis ao mesmo tempo, age1, age2 e age3, para guardar os valores extraídos. Do lado direito, indicamos que esses valores serão copiados do array ages.

Não especificamos os índices de onde os valores devem ser extraídos porque não é mais necessário; agora, eles implicitamente seguem a ordem dos elementos no array.

No entanto, isso não significa que precisamos extrair todos os valores. É possível ignorar valores deixando um espaço em branco entre as vírgulas, dessa forma:

const ages = [14, 28, 47];

const [age1, , age2] = ages;

console.log(age1, age2);
// 14 47

No exemplo acima, a desestruturação pulou o segundo índice, que foi descartado.

Podemos seguir a mesma lógica para extrair valores de um objeto. Vamos desestruturar o nosso exemplo anterior de objeto:

const person = {
  name: 'Barbara',
  age: 36,
  job: 'Developer'
};

const {name, age, job} = person;

console.log(name, age, job);
// Barbara 36 Developer

Aqui, as chaves {} indicam que o objeto será desestruturado e os valores serão guardados nas variáveis name, age e job. E, do lado direito, indicamos que os valores serão copiados do objeto person.

Não especificamos as chaves de onde os valores são extraídos porque, usando variáveis de nomes idênticos às chaves do objeto, a desestruturação entende a correspondência e armazena automaticamente o valor da chave name na variável name. É como se fizéssemos const name = person.name.

Vale lembrar que essa operação não altera o array ou objeto de origem — apenas copia seus valores para outras variáveis.

Por hoje é só e até a próxima ❤