ECMAScript 6 ainda está começando a ser usada amplamente por desenvolvedores front-end pelo mundo. Para dar uma ajudinha nos estudos, confira 6 truques de ECMAScript 6 que podem ser bastante úteis.

Impor parâmetros obrigatórios através de valores default

Valores de parâmetros ES6 são avaliados (evaluated) somente quando realmente utilizados. Isso permite impor que um determinado parâmetro seja fornecido:

A chamada de função mandatory() só é feita se o parâmetro mustBeProvided não for fornecido (is missing).

Interação:

Iterar em índices de Array e elementos através de loop for-of

O método forEach() permite iterar nos elementos de um array. Também, é possível ter acesso ao índice de cada elemento, como em:

O loop for-of de ES6 é um loop que suporta iteração de ES6 (via iterables e iterators) e destructuring. Se se combinar destructuring com as novas entradas de método entries() de Array, obtém-se:

arr.entries() retorna um iterable nos pares índice-elemento. O padrão de destructuring [index, elem] permite acesso direto a ambos os componentes de cada par. O parâmetro de console.log() é uma chamada a template literal — quem em JavaScript, traz interpolação de string.

Iteração em caracteres Unicode

Alguns pontos de código Unicode (ou seja, caracteres) compreendem 2 caracteres de JavaScript. Por exemplo, emojis:

Emoji JavaScript

Strings implementam ES6 iterador. Se se iteragir neles, recebe-se pontos de código codificados (1 ou 2 caracteres JavaScript ). Por exemplo:

Isso fornece uma maneira de contar o número de pontos de código em uma string:

O operador spread (...) insere os itens de seu operando em um array.

Trocar os valores das variáveis via destructuring

Colocando 2 variáveis em um array e, em seguida, aplicando destructuring nesse array nas mesmas variáveis, é possível trocar seus valores sem a necessidade de uma variável intermediária:

É concebível que o JavaScript otimize esse padrão no futuro para que nenhum array seja criado.

Templating simples através de Template Literals

Template Literals (ou Template Strings) em ES6 são mais como strings literais do que como modelos de texto tradicionais. Mas é possível usá-los para templates se forem retornados a partir de funções:

A função tmpl() (uma função arrow) mapeia o endereço de array em uma string. Usando tmpl() no array de dados:

Mixins simples via fábricas de subclasse

Se uma classe ES6 estende outra classe, essa classe é especificada de forma dinâmica através de uma expressão arbitrária (não estaticamente via um identificador):

Isso permite implementar um mixin como uma função que mapeia uma classe “C” a uma nova classe (com os métodos mixin) cuja superclasse é “C”. Por exemplo, as seguintes 2 funções de armazenamento e validação são mixins:

É possível usá-las para compor uma classe Employee, como segue:

Conclusão sobre os truques de ECMAScript 6

ECMAScript 6 ainda está sendo entendida por aqueles que a usamos, então, muitos truques e macetes ainda estão sendo “desvendados” e divulgados. Logicamente, estes 6 truques de ECMAScript 6 não vão aparecer em todo e qualquer projeto, mas podem ser bastante úteis em determinados casos.

Caso tenha dúvidas sobre a sintaxe de ECMAScript 6, conheça o repo es6features, com resumo das principais funcionalidades de ES6 com exemplos de códigos.