Usando o operador Destructuring JavaScript

Usando o operador Destructuring JavaScript

10/06/2018 0 Por Alisson Suassuna

Na dica de hoje falaremos sobre o uso do novo operador destructuring do JavaScript, esse recurso foi implementado na versão ECMAScript(ES6). Como o próprio nome já diz ele é um operador de desestruturação, daí você me pergunta Alisson o que é uma estrutura em JavaScript? Nada mais é do que um objeto ou array.  O operador destructuring tem duas formas de escritas, a primeira é empregada para trabalhar com objetos utilizando a anotação {chave}, e a segunda é no âmbito de arrays usamos anotação de [colchetes], vamos aos exemplos com códigos para uma melhor compreensão.

Antes do operador destructuring

Usando operador destructuring com objetos

Neste exemplo estamos declarando duas variáveis com os sequintes nomes (nome, idade) e extraindo os atributos do objeto “pessoa” cujo o nome seja correspondente, caso prefiramos trocar os nomes das nossas variáveis fazemos da seguinte forma:

const {nome: n, idade: i } = pessoa

Note que os nomes das variáveis são os mesmos que estão declarados dentro do objeto “pessoa”, caso esses nomes não sejam iguais o JavaScript irá retornar undefined.

const { gato, livro} = pessoa

console.log(gato, livro)

saída: undefined, undefined

Acessando objetos aninhados


Estamos percorrendo o objeto “endereco” que está dentro do objeto “pessoa” e extraindo os atributos (logradouro, numero e cep), como já vimos antes quando tentamos desestruturar um objeto cujo o nome da variável não corresponde ao atributo o JavaScript retorna undefined.

Cuidados

const { conta: { agencia, numero }  } = pessoa

console.log(agencia, numero)

Erro do código errado

Erro do código, cannot destructure property ‘agencia’ of ‘undefined’ or ‘null’

Se tentarmos desestruturar um objeto, que não pussuir os atributos correspondentes isso irá gerar um erro, pois o objeto “pessoa” não tem conta, nem os atributos “agencia” e “numero”.

Usando Destructuring com array

Declaramos um array com números de 1 a 5, em um array podemos declarar vários valores e para cada valor é atribuído um índice que começa com zero, ou seja o valor “1” que está na variável array tem o índice “0” e assim por diante, por isso que os valores das variáveis “n1” e “n2” são 1 e 2 respectivamente, vamos a mais um exemplo com arrrays.


Como citei os arrays possuir índices, é dessa forma que localizamos os valores de forma especifica e como mostro no código a cima, na primeira forma ele captura os valores que estão nos índices 0 e 1, já na segunda forma especificamos com o nome, como fazemos nos objetos, veja o poder da aplicabilidade que esse operador nos trás.

Usando Destructuring com Funções

Temos uma função com o nome numeros() que recebe por parâmetro um operador destructuring e por padrão possui os valores 2 e 5, adendo (esse é outro recurso do ES6, nele podemos passar valores padrões nos parâmetros), com esses valores será feito uma multiplicação que atribuímos a variável “valor”, por fim retornamos a variável  “valor”,  e por sim quando formos invocar a função numeros() passamos o objeto  usando a sintaxe do operador destructuring.

by: Alisson Suassuna

Seu feedback é muito importante, então deixa seu comentario, ou alguma susgestão para melhorias futuras…


Veja nossos outros artigos:

Entendendo a diferença entre var e let em JavaScript

Desvendando a Arrow Function JavaScript