{ 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á:
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á…
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.
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