Por que estudar ES6?
O ES6 representa a versão mais significativa do ECMAScript, introduzindo mudanças substanciais na linguagem e oferecendo novos recursos que tornam a programação mais simples e produtiva. Dominar ES6 é essencial para quem deseja se manter atualizado no desenvolvimento front-end.
Declaração de Variáveis e suas Características
Com let, não é possível redeclarar a mesma variável no mesmo escopo, ao contrário do que ocorria com var no ES5.
Escopo de Bloco
Variáveis declaradsa com let ficam restritas ao bloco onde foram definidas:
{
let mensagem = 'Olá mundo'
}
console.log(mensagem) // ReferenceError: mensagem is not defined
Se usássemos var, a variável seria acessível fora do bloco.
Sem Hoisting
Ao contrário de var, variáveis let não podem ser usadas antes de sua declaração no código.
Escopo em Cadeia Preservado
O escopo de bloco não interfere na cadeia de escopos (closures).
Constantes com const
Constantes são valores que não podem ser reatribuídos após a declaração inicial.
- Obrigatório inicializar:
const VALOR;gera erro. - Convenção: usar letras maiúsculas (ex.:
const LIMITE = 100;). - Não pode ser reatribuída:
LIMITE = 200;lança exceção. - Escopo de bloco: a constante só existe dentro do bloco onde foi definida.
- Objetos e arrays mutáveis: modificar propriedades ou elementos não quebra a regra de constante. Exemplo: ```
const JOGADORES = ['UZI','MXLG','Ming','Letme'];
JOGADORES.push('Meiko'); // Funciona sem erro
Desestruturação (Dsetructuring Assignment)
O ES6 permite extrair valores de arrays e objetos de forma direta e concisa.
Desestruturação de Array
const FAMOSOS = ['João','Maria','Pedro'];
let [joao, maria, pedro] = FAMOSOS;
console.log(joao); // João
console.log(maria); // Maria
Desestruturação de Objeto
const artista = {
nome: 'Leonardo',
idade: 45,
cantar: function() {
console.log('Cantando...');
}
};
let {nome, idade, cantar} = artista;
console.log(nome); // Leonardo
console.log(idade); // 45
Template Literals (Template Strings)
O ES6 introduziu as crases (`) para criar strings com interpolação de expressões e quebras de linha.
Forma Simplificada de Objetos
É possível incluir diretamente variáveis e funções como propriedades e métodos de um objeto, tornando o código mais limpo.
const nome = 'Ana';
const idade = 30;
const saudacao = () => 'Oi!';
const pessoa = {nome, idade, saudacao};
console.log(pessoa.nome); // Ana
Arrow Functions (Funções Flecha)
- this estático: o valor de
thisé o mesmo do escopo onde a função foi definida, não dependendo de como é chamada. - Não pode ser usada como construtor:
new MinhaArrow()gera erro. - Não possui arguments: objeto
argumentsnão está disponível dentro de arrow functions.
Formas Simplificadas
Quando há apenas um parâmetro, os parênteses podem ser omitidos:
let dobro = n => {
return n + n;
};
console.log(dobro(9)); // 18
Quando o corpo contém apenas uma expressão, as chaves e o return podem ser omitidos — o resultado da expressão é automaticamente retornado:
let quadrado = n => n * n;
console.log(quadrado(8)); // 64