Pílulas de JavaScript: desestruturação
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 ❤