As funcionalidades mais legais do ES6 através de exemplos

Os exemplos de código deste artigo podem ser executados facilmente no REPL.it! Basta copiar, colar e executar! https://repl.it/languages/javascript

O mundo do JavaScript tomou outra dimensão a partir do momento que o ecossistema node/npm explodiu. Com ele, tanto a comunidade quanto as empresas, começaram a enxergar o verdadeiro potencial da linguagem.

Com o seu sucesso e crescimento, não demorou para que saísse uma nova versão da especificação ECMAScript que levasse a linguagem para o próximo nível. Foi então que saiu o ES6 (ou ECMAScript 2015, se preferir), trazendo uma série de melhorias significativas.

Neste artigo, vamos rever as melhores funcionalidades através de exemplos.

Funções auxiliares de array

O primeiro ponto bacana da especificação é que foram incorporadas uma variedade de funções auxiliares que antes só estavam disponíveis em bibliotecas externas, como o jQuery, axios e outras. Essas funções são uma mão na roda na hora de lidar com arrays. As mais relevantes são:

• forEach: Iterar todos os elementos
• map: Iterar todos os elementos e fazer algo com seus valores
• filter: Filtrar os elementos dada uma condição
• find: Encontrar um elemento
• every: Verificar se todos os elementos respeitam dada condição
• some: Verifica se há pelo menos um elemento que respeita dada condição
• reduce: Reduzir os elementos em um único valor

Alguns exemplos de como utilizá-las:

Declaração de variáveis com let e const

Um dos pontos mais complicados no JavaScript é entender como funciona o seu escopo de execução (this). Para facilitar, foram criadas o let e o const para declaração de variáveis. O let nos permite declarar variáveis e o const, declarar constantes (valores imutáveis). Mas a grande diferença em relação ao var está no seu escopo. Enquanto o var tem escopo de função, o const e o let possuem escopo de bloco (blocos são definidos por chaves {}). Veja um pouco como funciona esta diferença na prática:

Arrow functions

De novo atacando o problema dos escopos de execução, chegaram as arrow functions. Elas são uma forma mais enxuta de definir funções utilizando a famosa fat arrow (=>). No entanto, existe diferença essencial: ele captura o contexto de execução do seu contexto delimitador. Isso evita fazer gambiarras como this = that. Veja só:

Template Strings

Viram no exemplo anterior como tivemos que construir a mensagem no console concatenando strings? Estamos acostumados a fazer isso, mas não deixa de ser ruim. Com o ES6, agora temos os template strings, que nos permite fazer interpolação de strings utilizando a crase e o cifrão acompanhado de chaves (${}). Como neste exemplo com o meu nome:

O mais bacana é que além de permitir escrever tudo de uma vez, ele também mantém a formatação!

Valores padrões para parâmetros em funções

Agora é possível atribuir valores padrões para parâmetros de funções. Isso nos ajuda a evitar uma série de verificações dentro das funções para garantir que os valores não são nulos ou não definidos (undefined).

Melhorias em objetos literais

Objetos literais se tornaram bem mais fáceis de se criar. Veja como podemos atribuir propriedade com mesmo nome de variáveis facilmente, declarar funções sem usar a palavra reservada function e criar propriedades dinâmicas.

Operadores Rest e Spread

Estes operadores nos ajudam a lidar com múltiplos parâmetros dentro de funções. O Rest prepara a função para receber um número indefinido de parâmetros, enquanto o Spread serve para passar vários parâmetros para uma função. Como nestes exemplos:

Classes

Quem nunca se enrolou com a herança por prototipagem do JavaScript? Agora conseguimos trabalhar com classes da maneira como já estamos acostumados em outras linguagens de programação. Podemos até mesmo usar hierarquia.

Mas é importante citar que apesar na nova sintaxe, por debaixo dos panos tudo funciona como antes.

Desestruturamento

Extrair informações de objetos e arrays ficou muito mais fácil também. Agora podemos criar variáveis que correspondem as propriedades do objeto tudo em uma tacada só usando as chaves ({}):

E este é só o começo…

Estas foram só algumas das funcionalidades mais bacanas trazidas à linguagem que tornaram o JavaScript uma linguagem muito melhor se de trabalhar. Ficaram faltando aqui outras funcionalidades muito bacanas, como proxies, funções geradoras, módulos, laço de repetição for…of, etc.

Gostou e quer se aprofundar no assunto?

Fica o meu convite para que vocês baixarem o e-book O Básico do ECMAScript 6 que contém mais detalhes sobre as outras melhorias; ver o curso Entendendo o ES6 que está à venda no Udemy e tem explicações completíssimas sobre cada um dos tópicos; e por fim, a ler o meu livro publicado pela Casa do Código, o ECMAScript 6 — Entre de Cabeça no Futuro do JavaScript.

Gostou? Recomende 👏 este artigo , comente, acompanhe nossa publicação e compartilhe!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br — Facebook, Twitter, Youtube