Bem-vindo JavaScript Moderno

Publicado em 17/10/2019


Durante o ASP.NET Cast do dia 16/10/2019 falamos muito sobre JavaScript, sua história e mudanças, e eu percebi que teve muita coisa que talvez tenha passado batido para muitos, inclusive para mim.

Eu sei que boa porcentagem dos alunos do site são pessoas buscando atualizações, então resolvi fazer este artigo para ajudar quem está desatualizado sobre JavaScript.

Let e Const

Anteriormente no JS utilizávamos sempre o var, tanto para constantes (Existia?) quanto para variáveis.

Uma das novas mudanças é a implementação do let para variáveis e const para constantes. Depois de criada uma constante, se você tentar passar um novo valor a ela, receberá um erro.

Arrow Functions

As Arrow Functions são uma forma menos verbosa de escrever funções, removendo a keyword function.

Fora a estética, o uso das Arrow Functions elimina a necessidade da keyword this dentro da função. Desta forma, em determinadas situações é quase obrigatório o uso de Arrow Functions. Para ser sincero, utilize apenas Arrow Functions daqui para frente.

Podemos receber parâmetros nas funções também, bastando informar seus nomes na assinatura da mesma.

Para finalizar, se sua Arrow Function tem apenas uma linha de retorno, podemos utilizar a chamada “sem corpo -- bodyless”, e se existir apenas um parâmetro de entrada, também não é necessário uso dos parênteses.

Exports e Imports

Outro recurso importante foi a chegada da importação e exportação de módulos e classes, facilitando a modularização dos nossos Apps.

Podemos simplesmente utilizar o export default SEUOBJETO para exportar um objeto de uma classe.

Ou podemos utilizar o export const diretamente no objeto, que é o meio mais comum e que particularmente prefiro.

Com tudo exportado, podemos importar os objetos, utilizando o import. Para importar objetos exportados utilizando o default, basta criar um nome e fazer sua importação.

Para objetos exportados via const, devemos utilizar seu mesmo nome, e entre colchetes.

Podemos também utilizar alias para ambos os casos, como mostrado no código abaixo.

E se você tiver muitos exports em uma classe e quiser importa-los todos de uma vez (Somente exports via const), você pode utilizar o wildcard * e criar um alias para ele.

Classes

Anteriormente havia um suporte a OOP mas com prototypes, algo diferente do comum que temos em outras linguagens. Hoje temos classes e heranças no JS.

Lembre-se que as classes são sempre passadas por referência, ou seja, nunca será criada uma cópia dela, diferente de como temos com objetos primitivos (string, int, bool).

Spread Operator

Se arrays e objetos complexos são passados como referência, como fazemos para adicionar propriedades ou elementos a eles?

Para utilizá-lo, basta adicionar “...OBJETOANTERIOR” que anexamos o objeto ou array anterior no novo.

Isto vale tanto para arrays quanto para objetos.

Rest Operator

O Rest Operator permite que façamos o envio de um array de parâmetros para uma função utilizando os mesmos “...” do Spread.

Uma vez enviado para função como parâmetro, temos ele materializado como um array, podendo inclusive executar métodos como filter, map, entre outros.

Destructuring

Utilizamos o Destructuring para extrair elementos de um array ou propriedades de um objeto, diretamente para uma variável.

No caso dos arrays, basta criar um array (literalmente) e igualar a sua lista de objetos. Ele irá mapear cada item da sua lista para seu novo array.

Caso queira pular algum item, é só não criar uma variável e deixar um espaço em branco ou somente a virgula no array.

No caso de objetos, basta criar uma variável entre chaves com o mesmo nome de alguma propriedade do objeto.

Caso não haja uma propriedade com este nome, a variável ficará undefined.

Map

Além do filter que vimos anteriormente, temos também o map, que percorre uma lista de elementos permitindo interagir com eles.

Podemos por exemplo percorrer uma lista de números e dobrar seu valor, armazenando-os em uma nova variável, com poucas linhas de código.

Se lembrar-mos que podemos remover os parênteses das Arrow Functions quando temos apenas um parâmetre e utilizar funções sem corpo, o código fica ainda menor.

Conclusão

O JavaScript vem evoluindo muito nos últimos anos e deixou de ser aquela linguagem arcaica e abandonada. Existem funcionalidades exclusivas dele e que facilitam muito nossa vida.

Fontes

https://www.academind.com/learn/javascript/reference-vs-primitive-values/



Compartilhe este artigo

André Baltieri

7x Microsoft MVP

Olá eu sou o André Baltieri, desenvolvedor Web desde 2003, já trabalhei no Brasil e nos EUA, em projetos de diversos tamanhos.

Recebi por sete vezes consecutivas, o prêmio de Most Valuable Professional da Microsoft, um reconhecimento global dado para os maiores influentes em suas tecnologias.

Atuei também como Head of People, recrutando, selecionando e direcionando a carreira de mais de 70 desenvolvedores em uma das melhores empresas para se trabalhar do Brasil.

Sou palestrante em diversos eventos como ASP.NET Conference, DevXperience, TDC, GDG dentre outros e desde 2012 realizo treinamentos e consultorias em diversas empresas do Brasil, acumulando uma ótima experiência que também transformo em cursos InCompany e Online.



Cursos Relacionados



Carreiras Relacionadas