Guia Completo sobre ES6: Principais Recursos e Sintaxe

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 arguments nã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

Tags: ES6 javascript let const destructuring

Publicado em 7-9 16:19