{ Desestruturação } = Javascript — Parte 1

Olá, tudo bem? Para os que não me conhecem, sou o Léo (também conhecido como Sorriso), esse é meu primeiro post, então não espere uma maravilha de texto e de exemplos haha, mas vamos lá:

Tô pronto!

Hoje vou falar um pouco sobre o Javascript, ECMAScript, ES ou Javascripto (para os chegados), mas antes de tudo, você sabe porque essa linguagem tem tantos nomes? Javascript é derivado do Java? Tem NullPointerException? É um script? Calma, vamos lá…

Senta que lá vem história…

Um pouco de história

O JavaScript surgiu em 1995 com o nome Mocha, mas no mesmo ano foi renomeado para LiveScript com a nova versão do navegador da NetScape e no final de 1995, o nome foi alterado para JavaScript (Java na época era bem popular, então foi meio que uma jogada de marketing o nome).

Tá mas e o ECMAScript? Vamos por partes, ECMA (European Computer Manufacturers Association) é uma associação destinada a padronização, nisso há um padrão chamado ECMA-262 em que o ECMAScript, que é uma especificação, segue. O ECMAScript oferece os detalhes, regras e guias para uma linguagem ser compatível com ele. O JavaScript é um linguagem que segue as especificações do ECMAScript, mas diverge em alguns pontos, por isso é considerado uma coisa separada. Uma analogia seria: a documentação do ECMAScript fornece detalhes para se criar uma linguagem de script, já a documentação do JavaScript fornece detalhes para se usar essa linguagem.

Resumindo, é isso! É meio difícil de entender logo de cara, mas vou deixar uns artigos ao final do texto para maiores detalhes. Na prática nós chamamos de JavaScript mesmo e se quisermos nos referir as versões chamaremos de ECMAScript “X” ou ES “X” , “X” sendo o número da versão, não vou entrar em detalhes de versões porque é outra coisa complicada, e vou acabar me estendendo demais, mas falaremos aqui de uma feature do ES6/ES2015/ECMAScript 2015 (eu disse que era complicado…), a desestruturação.

Até que enfim um pouco de código

Desestruturação

No título desse post, dei um pequeno spoiler do que seria mais ou menos a sintaxe de uma desestruturação, que seria desestruturar alguma coisa e retirar aquilo que você precisa e usá-la, no exemplo do título seria retirar a desestruturação de JavaScript, para usa-la nesse post. Vamos ao código, primeiro vamos definir um objeto:

Agora, por exemplo se quiséssemos acessar algumas propriedades desse objeto, e armazená-las em variáveis sem desestruturação:

Funciona? Com certeza funciona, mas veja que temos que replicar várias vezes Pessoa e endereco, o que pode levar à erros e nunca é legal ficar replicando código, certo? Agora vamos ver como ficaria com a desestruturação:

Muito melhor, não?! Assim, não é necessário usar a notação de . para acessar as propriedades, não precisamos repetir Pessoa e endereco várias vezes, e na minha opinião fica mais legível. Mas o que está acontecendo afinal? Na linha 10 à 15 estamos dizendo que queremos as propriedades nome, sobrenome e numero do objeto pessoa e ao mesmo tempo, estamos criando variáveis com esses mesmos nomes! E veja que foi feito uma desestruturação do objeto aninhado, endereco , também.

Nesses exemplos usamos desestruturação em propriedades, mas é possível usar também em objetos como no caso endereço, em que poderíamos desestruturar endereco e acessar a propriedade número como endereco.numero.

Esse recurso é utilizado também em respostas vindas do servidor, por exemplo:

Com isso podemos obter as informações que precisamos direto da resposta, e poderemos usá-la em seguida.

Valores default

Outra coisa muita legal da desestruturação é o valor default, imagine que na resposta vinda do servidor no exemplo abaixo, nós precisamos muito da variável pagina, porque sem ela uma parte do nosso código irá quebrar, nesse caso nós podemos definir um valor default para ela, caso ela não venha na resposta:

Lembrando que: passar um valor default só funciona caso a variável não exista nesse caso e se existir, o valor dela deve ser undefined , se for null ou qualquer outro valor, não será utilizado o valor default.

Renomeando variáveis na desestruturação

Agora, e se quisermos ter a propriedade rua daquele objeto pessoa , do primeiro exemplo, mas dessa vez nós queremos que essa variável se chame logradouro , como fazer? Simples, basta dizermos o nome da propriedade que queremos seguido do novo nome, por exemplo:

Simples não é? Isso ajuda bastante em deixar o código mais legível e dar mais significância ao nome das nossas variáveis, já que podemos dar um nome que faça sentido no nosso código e também ajudar no caso em que já tenhamos declarado uma variável com mesmo nome antes.

Desestruturação não altera o objeto

Uma coisa importante de se notar é que a variável desestruturada NÃO altera o objeto original, é criado uma cópia dessa propriedade, ou seja, caso tenhamos a variável nome desestruturada qualquer modificação nela não altera a propriedade original:

Portanto, podemos ficar despreocupados em alterar o objeto original, já que é feita uma cópia do valor e não da referência para esse espaço na memória em que se encontra a propriedade do objeto.

Vou encerrar a primeira parte por aqui, para não ficar muito extenso o post, mas só toquei na superfície do que é desestruturação, além de focar só na parte de objetos, mas ela funciona também com arrays, e há muitas outras coisas sobre desestruturação que não abordei nessa primeira parte.

Obs1: Como disse esse é meu primeiro post, então qualquer dúvida, sugestão, complemento ou crítica podem deixar nos comentários, para discutirmos um pouco e aprender mais.

Obs2: Escolhi um tema um pouco extenso, e para mim, achei um pouco difícil escolher bons exemplos, mas é uma funcionalidade que eu amo e fiquei impressionado a primeira vez que vi 😆, por isso quis trazer para vocês para pelo menos despertar a curiosidade. Mas como disse, tem muita coisa a ser abordada e só toquei na superfície. Pretendo na próxima trazer um conceito mais básico para ajudar quem está precisando daquele empurrão para começar a aprender essa linguagem maravilhosa!

Qualquer coisa também só entrar em contato comigo nas redes sociais nos links abaixo. Abraço e até a próxima!

Agradecimentos:

Vinne Aso e Julio Cezar Santos Diniz pelas revisões!

Redes sociais:

• Facebook: https://www.facebook.com/LFerreiraAlmeida
• LinkedIn: https://www.linkedin.com/in/leonardofalmeida/

Referências:

• Diferenças ECMA/ES/JavaScript: https://www.freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5/
• Documentação MDN Desestruturação: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao