Descomplicando Javascript Destructuring — Objetos

É essencial que nosso código seja limpo, conciso e, principalmente, que funcione. Apesar de JavaScript ser uma das linguagens de programação mais usadas na atualidade, em uma enorme variedade de projetos em diversas áreas como backend, frontend, IoT, VR e mobile ela é uma das linguagens que mais nos prega pegadinhas na hora de usar.

Há um tempo o Javascript recebeu alguns poderosos recursos, que merecem ser notados e que podem ser usados para que nosso código seja mais limpo, mais conciso e até mais seguro, como template literals, destructuring, arrow functions, classes e spread operator.

Neste tutorial vamos entender o poder e a facilidade que a funcionalidade destructuring pode trazer ao nosso código e às nossas aplicações. Mas antes de entender como é importante entender o por quê. Se você é familiarizado e/ou programa em TypeScript, usa frameworks como Angular, Vue.js, React você já conhece destructuring, porém há uma grande possibilidade de você aprender novas coisas por aqui.

Aqui estou assumindo que você já conhece um pouco de Javascript, então não explicarei alguns pontos base da linguagem, assumindo que você já os conhece, =) ok? Precisamos também notar que, dependendo da versão do seu browser, se for uma versão antiga, alguns dos snippets apresentados aqui não funcionem, caso aconteça eu recomendo atualizar seu browser (manter o software de seu computador sempre atualizado ajuda a prevenir brechas de segurança). Você também pode rodar os snippets no Codepen ou no seu editor online de javascript preferido.

Por que usar Destructuring?

Vamos imaginar que fizemos uma requisição para um recurso de inteligência artifical capaz de medir o sentimento de uma determinada frase. Esse recurso nos devolve um objeto com a propriedade sentimentos e esse objeto é um objeto que contém o nome do sentimento como chave e o valor é a probabilidade de este sentimento estar presente, em %. Como podemos fazer para mostrar a probabilidade de cada sentimento presente nesta resposta?

O exemplo acima vai funcionar, sem problemas, mas vejam a quantidade de código que temos que escrever para alcançar o objetivo desejado. Escrever o código assim nos faz ter que escrever diversas vezes resposta.sentimentos o que pode nos levar a erros de digitação e muito mais código. Pode parecer pouco, mas com o destructuring nós podemos fazer a mesma coisa com muito menos código.

O que é destructuring?

Destructuring é basicamente quebrar uma estrutura complexa em partes mais simples. Por estrutura complexa, na maioria das vezes podemos considerar como sendo um array ou um objeto. Neste artigo trataremos somente de objetos, trarei pra vocês a aplicação de destructuring em arrays em um próximo artigo.

O destructuring pode ser usado tanto para declarar variáveis quanto para atribuir valores a variáveis.

Então como ficaria o exemplo anterior com destructuring?

No exemplo acima podemos ver que "quebramos" o objeto respostaem diversas partes menores, declarando variáveis com o mesmo nome das propriedades deste objeto, ok?

Mas e se eu já tivesse declarado variáveis com estes valores e quisesse re-atribuir estes valores? Bom, o destructuring também pode me ajudar nessa tarefa.

No código acima, o destructuring está fazendo 2 coisas distintas. A primeira é declarar novas variáveis tristezae euforiae atribuir a elas o valor dos atributos, de mesmo nome, do objeto resposta. A segunda é re-atribuir o valor de variáveis já declaradas, como usuario, canale felicidade.

Repare que neste exemplo tive que usar ( )em volta da expressão, se eu não tivesse colocado o destructuring seria tratado como um statement e isto não pode ocorrer do lado esquerdo de uma expressão de atribuição.

Valores default

Mas nem sempre podemos garantir que o objeto que estamos "quebrando" terá todos os atributos que estamos declarando ou re-atribuindo fora. Por isso temos um recurso muito interessante para previnir o aparecimento de erros inesperados em tempo de execução.

Imagine que você está consumindo um serviço em que você sempre espera um determinado payload na resposta, tudo rodando em produção, bonitinho, até que um dia o serviço que você está consumindo não mais manda uma determinada propriedade, não importa o motivo. Você pode fazer com que seu serviço deixe de funcionar.

Para que isso não aconteça, pode ser interessante declarar valores padrão para seus objetos. E como faríamos isso?

O exemplo abaixo foi retirado do contexto de um servidor expressrecebendo uma requisição. Ele recebe os parâmetros reqe res, que são, respectivamente, o objeto de requisição e o objeto de resposta.

Eu uso bastante o destructuring nesses filtros de API, pois ele me faz economizar bastante código. Neste exemplo eu posso usar a mesma função para o endpoint /studentse também para o /students/:studentId

Se houver no objeto req.paramsa propriedade studentIdeu sei que eu só preciso achar um único estudante.

Se não houver a propriedade studentIdeu sei que preciso achar todos os alunos da minha base, mas me foi passado um requisito de que, por padrão, só devo mostrar os alunos matriculados no ano de 2018. Então eu posso definir um valor padrão, 2018, para a propriedade year , retirada do objeto req.query

Usando nomes diferentes

Nem sempre o nome que vem no objeto que vamos "dissecar" é o melhor para a semântica de nossa aplicação, também temos um pequeno atalho para usar o destructuring já atribuindo um novo nome à propriedade que eu quero.

A sintaxe é muito simples nomeOriginal: novoNome, e eu consigo renomear a propriedade. Hoje em dia quase ninguém desenvolve sozinho, então devemos observar a importância de um código semântico e limpo, usar o nome correto na hora correta é um dom.

No exemplo acima eu renomeei a propriedade citypara cidade, a cpfpara ide a birthdaypara nascimento, vejam que a propriedade birthdaynão existia e por isso eu declarei um valor default pra ela, combinando 2 recursos que vimos por aqui.

Nested Object Destructuring

Embora o nome possa assustar aqui estou falando de destructuring em objetos "aninhados". É uma coisa bem comum, que haja um objeto dentro de outro e que eu queira separar este objeto grande em pequenas partes.

No exemplo acima nós temos o objeto notas dentro do objeto pessoa, e eu quero pegar as notas desta pessoa. Eu consigo as notas de matematica, fisicae educacaoFisicadesta pessoa, porém ela não cursou geografia, por ser opcional, o que eu já previa e atribui o valor de 0a esta disciplina.

Conclusão

O destructuring é bem conhecido por desenvolvedores dos mais famosos frameworks javascript da atualidade, porém eu queria passar para as pessoas que não conhecem o recurso ainda, ou mesmo para as que conhecem quem sabe aprender uma coisa ou outra diferente.

Menos código na maioria das vezes significa um código mais limpo e mais organizado, portanto tente usar o destructuring e veja os maravilhosos resultados. Em breve posto a parte 2 com Arrays.

Para este artigo me inspirei, e traduzi algumas parte deste artigo aqui.

Espero ter ajudado =)