Recursos do JavaScript ES6
Um guia prático sobre JavaScript ES6 (ECMAScript 2015): let e const, arrow functions, template literals, destructuring, classes, módulos, promises e mais.
O ECMAScript 6 (ES6) é uma atualização significativa da linguagem JavaScript que introduziu muitos recursos novos, tornando o JavaScript mais poderoso e eficiente. Este guia oferece uma exploração detalhada do ES6, com explicações abrangentes e vários exemplos de código para ajudá-lo a dominar esses novos recursos.
Introdução ao ES6
O ES6, também conhecido como ECMAScript 2015, trouxe muitas melhorias e novos recursos para o JavaScript. O ECMAScript é o padrão oficial que o JavaScript implementa, e o ES6 foi sua maior revisão desde 1999. Essas mudanças tornaram a linguagem mais moderna e mais fácil de trabalhar, melhorando tanto a legibilidade quanto a manutenibilidade.
Este guia percorre os recursos que você usará com mais frequência:
- Declarações de variáveis —
leteconst - Funções — arrow functions e parâmetros padrão
- Strings — template literals
- Trabalhando com dados — destructuring, object literals aprimorados, rest/spread
- Código assíncrono — promises
- Código orientado a objetos — classes e módulos
- Novas coleções e primitivos —
Map,Set,WeakMap,WeakSet,Symbol, iterators, generators e proxies
Hoje, todo navegador moderno e o Node.js suportam o ES6 nativamente, então você pode usar esses recursos sem uma etapa de build. Cada exemplo abaixo é executável—edite-o e pressione executar para experimentar.
Let e Const
Uma das mudanças mais notáveis no ES6 é a introdução de let e const para declaração de variáveis. Antes do ES6, a única opção era var, que tem escopo de função e sofre hoisting de uma forma que frequentemente produz bugs surpreendentes. let e const têm escopo de bloco e se comportam de forma mais previsível, motivo pelo qual o código moderno raramente usa var.
Let
A palavra-chave let permite declarar variáveis limitadas em escopo ao bloco, instrução ou expressão em que são usadas.
No exemplo acima, x declarado dentro do bloco if é uma variável separada de x declarado fora. Isso demonstra o escopo em nível de bloco fornecido pelo let. Com var, ambas as atribuições se refeririam à mesma variável, e o console.log externo imprimiria 20.
let e const também estão sujeitos à zona morta temporal (temporal dead zone, TDZ): a variável existe desde o início do bloco, mas não pode ser lida ou atribuída até que sua declaração seja executada. Referenciá-la antes lança um ReferenceError, o que detecta erros de digitação que var transformaria silenciosamente em undefined.
Const
A palavra-chave const é usada para declarar variáveis cujos valores nunca devem mudar. Ela tem escopo de bloco, assim como let.
Neste exemplo, tentar reatribuir um valor a y resulta em um erro, porque const declara uma constante cujo valor não pode ser alterado.
Um ponto comum de confusão: const impede a reatribuição da vinculação, não a mutação do valor. Um objeto ou array declarado com const ainda pode ter seu conteúdo alterado—você simplesmente não pode fazer a variável apontar para um objeto diferente.
Use const por padrão e só mude para let quando realmente precisar reatribuir. Isso evita alterações acidentais e sinaliza a intenção para qualquer pessoa que leia o código.
Arrow Functions
As arrow functions fornecem uma sintaxe concisa para escrever expressões de função. Elas também vinculam lexicamente o valor de this, o que as torna particularmente úteis para escrever funções curtas.
Aqui, a arrow function add recebe dois parâmetros e retorna sua soma. Quando o corpo é uma única expressão, você pode omitir as chaves e a palavra-chave return—o valor da expressão é retornado automaticamente.
A maior vantagem é que as arrow functions não têm seu próprio this; elas o herdam do escopo ao redor. Antes das arrow functions, callbacks frequentemente perdiam o this esperado, e desenvolvedores contornavam isso com const self = this ou .bind(this). As arrow functions tornam esse código repetitivo desnecessário:
Como não têm seu próprio this, evite usar arrow functions para métodos de objeto que dependem de this, e para event handlers em que você espera que this seja o elemento. Use uma função regular nesses casos.
Template Literals
Template literals facilitam a criação de strings, especialmente ao incorporar variáveis ou expressões. Elas usam crases (```) em vez de aspas.
Este exemplo mostra como os template literals permitem incorporar a variável name diretamente na string, melhorando a legibilidade e a conveniência. O placeholder ${ ... } pode conter qualquer expressão, não apenas uma variável—por exemplo `Total: ${price * qty}`. Os template literals também abrangem várias linhas sem \n, então você pode escrever saída formatada ou pequenos trechos de HTML diretamente.
Parâmetros Padrão
Parâmetros padrão permitem inicializar parâmetros de função com valores padrão caso nenhum valor seja fornecido.
Neste exemplo, a função multiply atribui um valor padrão de 1 a b se um segundo argumento não for fornecido, garantindo que a função sempre retorne um resultado válido.
Atribuição por Destructuring
O destructuring assignment é uma forma conveniente de extrair valores de arrays ou objects em variáveis distintas.
Destructuring de Array
Este exemplo mostra como o destructuring de array permite atribuir os valores do array numbers a variáveis individuais a, b e c.
Destructuring de Object
Neste exemplo, o destructuring de object extrai as propriedades name e age do objeto person em variáveis separadas.
Object Literals Aprimorados
O ES6 aprimora os object literals, permitindo uma sintaxe mais concisa e legível.
Aqui, o objeto obj usa nomes de propriedades abreviados e definições de métodos, tornando o object literal mais conciso.
Promises
As promises fornecem uma forma de lidar com operações assíncronas de maneira mais eficiente, evitando o callback hell e tornando o código mais legível.
Neste exemplo, uma promise é criada e resolvida após 1 segundo com a mensagem 'Success!'. O método then é usado para tratar o valor resolvido.
Use promises para lidar com operações assíncronas de forma organizada e evitar o callback hell.
Classes
O ES6 introduziu as classes, fornecendo uma sintaxe mais clara e concisa para criar objetos e lidar com herança.
Este exemplo demonstra como as classes no ES6 oferecem uma sintaxe limpa e intuitiva para definir objetos e seu comportamento.
Módulos
Os módulos permitem dividir seu código em arquivos separados e importar/exportar funções, objetos ou primitivos entre arquivos.
Exportando
// math.js
export const add = (a, b) => a + b;Importando
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5Nesses exemplos, a função add é exportada de math.js e importada em main.js, demonstrando como os módulos facilitam a organização e a reutilização de código.
Operadores Rest e Spread
Operador Rest
O operador rest (...) permite representar um número indefinido de argumentos como um array.
Neste exemplo, a função sum usa o operador rest para reunir todos os argumentos em um array, facilitando a realização de operações sobre eles.
Operador Spread
O operador spread (...) permite que um iterável (como um array) seja expandido em locais onde zero ou mais argumentos ou elementos são esperados.
Este exemplo mostra como o operador spread pode ser usado para combinar arrays em um único array, simplificando o código.
Iterators e Generators
Iterators
Iterators são objetos que permitem percorrer uma coleção, como um array ou string.
Neste exemplo, o iterator fornece uma forma de acessar cada elemento do array sequencialmente.
Generators
Os generators são funções que podem ser pausadas e retomadas, fornecendo uma forma poderosa de lidar com iteráveis.
Este exemplo mostra como uma função generator pode produzir (yield) valores um de cada vez, pausando a execução entre cada yield.
Symbols
Symbols são um novo tipo primitivo de dado introduzido no ES6. Eles são únicos e imutáveis, frequentemente usados para criar chaves de objeto únicas.
Neste exemplo, symbol1 e symbol2 são únicos, mesmo tendo a mesma descrição.
Maps e Sets
Maps
Maps são coleções de pares chave-valor em que as chaves podem ser de qualquer tipo.
Este exemplo demonstra como criar um map, definir pares chave-valor e recuperar valores.
Sets
Sets são coleções de valores únicos.
Neste exemplo, o set contém apenas valores únicos, mesmo que 3 tenha sido adicionado duas vezes.
Proxies
Proxies permitem criar um proxy para outro objeto, possibilitando interceptar e redefinir operações fundamentais.
Este exemplo mostra como um proxy pode interceptar o acesso a propriedades, fornecendo uma resposta personalizada quando a propriedade não é encontrada.
WeakMap e WeakSet
WeakMap
WeakMap é semelhante a Map, mas só permite objetos como chaves e não impede a coleta de lixo (garbage collection) se não houver outras referências ao objeto usado como chave.
WeakSet
WeakSet é semelhante a Set, mas só permite objetos como valores e não impede a coleta de lixo se não houver outras referências ao objeto.
Conclusão
O ES6 traz uma riqueza de recursos que tornam o JavaScript uma linguagem mais robusta e eficiente. Ao entender e utilizar esses recursos, os desenvolvedores podem escrever código mais limpo e de mais fácil manutenção. Este guia apresentou uma análise aprofundada dos aspectos mais importantes do ES6, com exemplos para ajudá-lo a começar.
Para aprofundar-se em cada tópico individualmente, continue com arrow functions, destructuring assignment, rest parameters e spread syntax, classes, módulos e promises.