Uma Introdução a ECMAScript 6

A ECMAScript é uma especificação, definida pela Ecma Internacional e padronizada com o nome de ECMA-267. Todas as as implementações de JavaScript dos navegadores e ambientes NodeJS derivam deste padrão. A ECMAScript 6, lançada em 2015, é a mais recente atualização da especificação, desde 2009. Ela adiciona uma série de features à linguagem que certamente vão impactar o modo como escrevemos JavaScript. Na Touch Health, algumas equipes já começaram a experimentar o ECMA 6 em seus projetos. O objetivo deste artigo é oferecer um “aperitivo” com algumas destas novas features e assim instigar o leitor a buscar mais conteúdo sobre o tema.

Melhorias de escopo: let e const

Para declarar variáveis, usamos a palavra reservada var. Ocorre que em JavaScript, diferentemente de outras linguagens, o escopo onde uma variável declarada com var existe não é exatamente o bloco onde ela é declarada. A variável é “içada” (hoisted) ao topo da função (ou ao contexto global, se for declarada fora de uma function) e então se torna acessível também fora do bloco onde havia sido declarada. Vejamos o seguinte exemplo:

O script acima produzirá a seguinte saída no console:

verdadeiro

verdadeiro

Embora tenhamos declarado “a” dentro do bloco do if (condition), ela permanece acessível também fora dele. O compilador faz o hoisting da variável para fora do bloco, resultando na seguinte forma:

Esta característica do JavaScript pode levar a bugs ou comportamentos não esperados, uma vez que não é algo intuitivo. Para melhorar esta questão, foram introduzidas à linguagem as palavras reservadas let e const. A primeira permite declarar uma variável que fique acessível somente no escopo do bloco onde é declarada. A segunda segue a mesma ideia em relação ao escopo e faz com que a variável se torne uma constante. Vejamos como ficaria o script anterior com o uso de let:

Ao rodar o script, o seguinte erro é reportado:

_inline_script_1.js:7:15: a is not defined

O erro acontece porque “a” não está acessível na linha 7, pois não existe.

A palavra reservada const possibilita a criação de constantes. Uma constante não pode ter o seu valor alterado e não é possível haver duas constantes com o mesmo nome no mesmo escopo.

O script acima produzirá dois erros: o primeiro indicará que “a” é read-only, o segundo indicará uma declaração duplicada.

Melhorias com strings

O tipo string também teve melhorias incorporadas à nova especificação. A seguir, listamos as principais melhorias nesta área:

Multi-line strings

Até então, para criar strings em múltiplas linhas, era preciso recorrer ao caractere “\” para sinalizar a continuação da string na próxima linha:

O mesmo comportamento pode ser obtido em ECMA 6, da seguinte forma:

Novos métodos na classe string

Até a versão 6, a classe string dispunha apenas do método “indexOf” para busca de substrings. A partir da nova versão, estão disponíveis os métodos includes, startsWith e endsWith:

A saída para o script acima será:

true

true

true

Interpolação de strings

ECMA 6 oferece suporte nativo para interpolação de strings:

Saída no console:

Sun Sep 20 2015 20:45:49 GMT-0300 (BRT) é a data/hora em que vc aprendeu a interpolar strings em ECMA 6!

Functions

Uma série de melhorias na manipulação de funções também foram introduzidas na nova versão da ECMA 6:

Parâmetros default

Agora é possível ter parâmetros default, uma feature bastante comum em outras linguagens. Para tal, basta declarar o parâmetro e atribuir um valor a ele:

A saída no console:

Hello world!

Hello folks!

Na primeira chamada, omitimos a passagem do segundo argumento, portanto o parâmetro é iniciado com o valor “world”, definido na declaração da função. Na segunda chamada, passamos dois argumentos e então o valor default é ignorado.

Rest parameters

Esta é uma feature que em algumas linguagens (como Java) é chamada de varargs. Trata-se de uma construção onde é especificado um parâmetro precedido de três pontos (…) e, então, pode-se passar como argumento um ou mais valores que internamente na função são tratados com um array:

Perceba que o parâmetro numbers é de fato um array, portanto podemos chamar o método map para executar o que queremos. As chamadas podem passar quantos argumentos forem necessários.

Nova sintaxe para métodos

É possível definir métodos em objetos usando uma sintaxe mais enxuta:

Arrow functions

As arrow functions, cujo nome remete à sintaxe “=>”, permite a definição de closures de uma forma mais resumida:

A construção inicia com a definição do parâmetro da função (no caso acima, apenas “x”), seguida do operador “=>” e de uma expressão a ser executada cujo valor será o retorno da função.

Existem variações desta sintaxe, conforme a necessidade. Por exemplo, se for preciso mais de um parâmetro, eles devem ser definidos entre parênteses:

Um aspecto importante sobre as Arrow Functions é que elas compartilham o mesmo lexical this do escopo das funções onde são definidas, diferentemente das functions convencionais:

Suporte a classes

Uma das mudanças mais interessantes na nova versão é a nova sintaxe para definição de classes. As versões anteriores ao ECMA6 suportam a criação de classes e herança basicamente pela manipulação da propriedade prototype. O exemplo a seguir ilustra como funciona este mecanismo em ECMA5 :

O mesmo resultado pode ser obtido em ECMA6 da seguinte forma:

A sintaxe na nova versão, além de mais intuitiva, reduz a quantidade de código boilerplate necessário para se obter o mesmo comportamento.

Módulos

A versão 6 define suporte nativo a módulos. Um módulo é um arquivo JavaScript, que pode exportar variáveis, funções e classes. Então, é possível importar estes símbolos e usá-los em outros scripts, similarmente ao que ocorre em outras linguagens, como python e java. Módulos são especialmente úteis para projetos grandes, pois ajudam na organização do código. O trecho de código a seguir exemplifica o funcionamento:

Conclusão

As melhorias na linguagem e na API padrão são várias e vão sem dúvida facilitar o dia a dia do desenvolvimento com JavaScript. Muitas outras áreas da linguagem não abordadas neste artigo foram melhoradas: expressões regulares, promises, async, entre outras. A nova versão foi construída tendo em mente manter a retrocompatibilidade com versão 5, de modo a “não quebrar a web”. Atualmente, o suporte nos browsers ainda está em desenvolvimento e o progresso pode ser acompanhado em https://kangax.github.io/compat-table/es6/. Não obstante o suporte incompleto dos navegadores, existe a possibilidade de usar a nova versão na web “traduzindo” o código em ECMA 6 para ECMA 5, por meio da ferramenta BabelJS . O BabelJS é um compilador source-to-source que consegue traduzir código ES6 para ES5 e pode ser usado através de ferramentas de automação de build, como Gulp e Grunt. Usando estas ferramentas, é possível se beneficiar das vantagens do ECMA6 nos projetos atuais antes que o suporte dos browsers tenha sido finalizado.

Links úteis

Gostou? Não se esqueça de Recomendar e Compartilhar!