Pressione enter para ver os resultados ou esc para cancelar.

Desmitificando o destructuring do JavaScript ES6/ES7

As novas especificações do EcmaScript trouxeram uma série de melhorias e recursos adicionais na sintaxe e funcionalidade da linguagem. Uma delas que particularmente gosto e uso bastante, por ajudar a deixar o código mais curto e mais claro, é a possibilidade de fazer destructuring em objetos e arrays.

 

Entender o que esse recurso faz é simples: ele facilita o acesso a dados dentro de um array ou objeto e a criação de variáveis que contenham esses dados. Porém isso não quer dizer que ele faça pouca coisa. Na verdade, suas aplicações são bastante diversas, e vou tentar contemplar algumas neste post.

 

Declaração de variáveis

Imaginemos declarar variáveis para dados dentro do seguinte objeto:

 

Vamos mostrar no console o nome da empresa e as cores de camisetas usando ES5:

 

Agora vamos ver como ficaria usando ES6:

 

É interessante ver como não é mais necessário escrever múltiplas declarações de variáveis de um mesmo objeto. A nova sintaxe facilita a extração dos dados.

 

Mas e se eu quiser que o nome da variável seja diferente do nome da propriedade do objeto?

É possível extrair o dado do objeto renomeando a variável que está sendo declarada:

 

E como evito valores não definidos?

Caso alguma propriedade dentro do objeto em questão possa, em certas ocasiões, não estar declarada, é possível tratar isso atribuindo a ela um valor padrão:

Destructuring de objetos que são argumentos em uma função

Quando uma função recebe um objeto como argumento, é comum que precisemos usar atributos dentro desse objeto para executar comandos dentro da função.

 

Exemplo usando ES5:

 

Exemplo usando ES6:

 

Renomear e atribuir valor padrão continua valendo:

 

Spread operator, aquele dos três pontinhos

Imaginemos o seguinte objeto:

 

Digamos que eu queira consumir apenas os dados de roupas que não são calças. Não existe nenhum jeito nativo de fazer isso na especificação antiga. A solução dependeria do caso de uso e poderia ser necessário usar um loop. Porém, com o spread operator isso fica muito fácil:

 

Plus a mais: além de auxiliar com o destructuring, o spread operator é útil para clonar e concatenar objetos.

Destructuring de arrays

Além de objetos, também podemos fazer isso com arrays:

 

Valores default continuam valendo:

 

E o spread operator também funciona:

 

Se você quer experimentar um pouco mais este e outros recursos, o Babel, que é um transpilador de JS (serve para escrevermos código com as especificações novas para plataformas onde elas ainda não são totalmente suportadas) possui uma ferramenta em seu site para isso:

http://babeljs.io/repl/

Conclusão

O destructuring possui mais recursos e aplicações mais avançadas, mas com este conteúdo já se tem o necessário para começar a usá-lo e simplificar seu código. Como vimos nos exemplos, ele é bastante útil para facilitar a leitura do código e o acesso a valores que precisamos em determinado contexto. Com pouco esforço, temos a variável que queremos, no lugar que queremos, com o nome e valor que queremos e até tratando valores nulos ou indefinidos.

 

Qualquer dúvida ou consideração sobre o artigo, por favor deixe nos comentários. Até a próxima (;


***
📣
Estamos contratando pessoas que desenvolvam software!
Mais informações sobre a vaga.
***