Utilizando destructuring no ES6

Desestruturação ou desctructuring é uma funcionalidade do JavaScript ES6 que nos permite extrair dados de arrays, objetos e até retorno de funções em variáveis distintas.

Este conteúdo está disponível em vídeo também:

Com Destructuring podemos escrever menos código e atingir o mesmo objetivo do que nas versões antigas de JavaScript e em vários casos

Basicamente ele muda a antiga forma de atribuir valor a uma variável em cada linha, e nos da a possibilidade de fazer isso em uma só

Vamos agora ver a utilização do recurso nestes

Array para variáveis:

Podemos atribuir valores a várias variáveis que os valores vem de um array com apenas uma única linha, veja:

// array para variável
const arr = [1,2,3,4,5];
let [a,b,c,d,e] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // 5

No exemplo acima desestruturamos um array arr nas variáveis a, b, c, d e e

Objeto para variáveis:

E da mesma forma podemos usar o destructuring em objetos, veja:

const obj = {
    nome: 'Matheus',
    sobrenome: 'Battisti',
    idade: 28,
    pais: 'Brasil'
}

let {nome: n, sobrenome: s, idade: i, pais: p} = obj

console.log(`${n} ${s} tem ${i} e mora no ${p}.`) // Matheus Battisti tem 28 e mora no Brasil.

E ainda se utilizarmos o mesmo nome da propriedade para variável, podemos condensar o código mais ainda:

let {nome, sobrenome} = obj

console.log(`${nome} ${sobrenome}`) // Matheus Battisti

Neste caso não precisamos colocar nome: nome e sim só nome, graças ao destructuring

Funções para variáveis:

Outra forma de utilizar o destructuring é atribuindo variáveis de acordo com o retorno de uma função, confira:

function numeros() {
    return [5, 10];
}

let [num1, num2] = numeros();

console.log(num1); // 5
console.log(num2); // 10

Ignorando elementos:

Caso nosso objetivo não seja utilizar todos os valores do array, podemos pular os elementos que não desejamos

Veja o exemplo a seguir:

// ignorando elementos
const lista = ['Maçã', 'Laranja', 'Banana', 'Caqui'];

let[, , ,caqui] = lista

console.log(caqui); // Caqui

Adicionamos apenas o valor do último elemento a variável caqui, com as vírgulas e o espaço vazio o elemento que não desejamos foi ignorado

Funciona com qualquer coisa que pode ser iterada:

Uma função de utilidade duvidosa, porém vale o aprendizado 😀

Destructuring pode atribuir para variáveis qualquer valor que pode ser iterado

let [x,y,z] = 'xyz';

console.log(x); // x
console.log(y); // y
console.log(z); // z

No exemplo acima vemos uma string que foi separada em 3 partes, uma para cada variável

Destructuring com Rest Operator:

Podemos também fazer uso com a funcionalidade do Rest de separar o resto de um array para uma determinada variável

const numeros2 = [1,2,3,4,5,6,7,8,9,10];

const [parte1, ...parte2] = numeros2;

console.log(parte1); // 1 
console.log(parte2); // [2, 3, 4, 5, 6, 7, 8, 9, 10]

Perceba que parte1 recebeu apenas o primeiro número, conforme funciona o destructuring normalmente

Porém parte2 recebeu o resto pois a atribuição recebeu o Rest Operator

Cuidados ao usar o destructuring

Há dois pontos conhecidos que podem nos levar aos chamados pitfalls quando utilizamos o destructuring

São eles:

• Não podemos iniciar uma declaração com chaves;
• Para declarar e atribuir valor a variáveis precisamos colocar var, let ou const antes;

Vamos ver por código:

const pessoa = {
    nome: 'Alexia',
    sobrenome: 'Couto'
}

let q,w;

{q , w} = pessoa; // Syntax Error

({q, w} = pessoa); // ok

No exemplo acima tentamos fazer uma atribuição direta a q e w e então recebemos um erro de sintaxe, pois não podemos abrir a sentença com {

Então para evitar este problema inicie com (

({p1, p2}) = pessoa); // Uncaught SyntaxError

const {p1, p2} = pessoa; // ok

Agora neste exemplo declaramos e atribuimos valores a p1 e p2, que ainda não foram declaradas, o que ocasiona um erro

Porém podemos resolver isso com let, var ou const antes

Repositório

Você pode encontrar todo o código utilizado aqui!

Conclusão

Vimos que o destructuring pode ser utilizado para atribuir variáveis por valores vindos de arrays, objetos e também funções

Ele funciona bem com o operador Rest e também com qualquer valor que pode ser iterado

Os pitfalls são poucos e podemos até dizer que não são motivos para evitar o destructuring

Para quem não sabe como funciona o recurso pode parecer um tanto confuso

Porém com um pouco de prática já fica fácil de entender o que está acontecendo

Confira também o nosso canal do Youtube com muito conteúdo sobre programação, clicando aqui.

Então por hoje é isso galera, obrigado por lerem até o fim e até o próximo! 🙂