Baixe o material de estudo
Olá, querida(o) estudante! Neste artigo, vamos estudar o ECMAScript 6 (ES6) e as versões posteriores, que representam a base do JavaScript moderno utilizado em aplicações web, mobile e back-end. Lançado em 2015, o ES6 trouxe um conjunto de funcionalidades que tornaram o JavaScript mais poderoso, seguro e organizado — características essenciais tanto para desenvolvimento profissional quanto para questões de concursos de TI.
O que é ECMAScript 6 (ES6)?
O ECMAScript é a especificação oficial da linguagem JavaScript. O ES6, também chamado de ECMAScript 2015, foi a maior atualização da linguagem desde sua criação. Ele introduziu melhorias profundas na sintaxe, orientação a objetos, escopo de variáveis e manipulação de estruturas de dados, estabelecendo o padrão de desenvolvimento utilizado hoje por frameworks como React, Angular e Vue.js.
O ES6 não apenas adicionou novas palavras-chave, mas mudou a forma como escrevemos JavaScript no dia a dia.
Declaração de variáveis: var, let e const
Uma das mudanças mais importantes introduzidas pelo ES6 foi a nova forma de declarar variáveis usando let e const, criadas para solucionar problemas históricos do var. Antes do ES6, todo JavaScript dependia exclusivamente do var, uma palavra-chave que possui escopo de função, sofre hoisting* e não respeita escopo de bloco. Isso fazia com que variáveis declaradas dentro de um if, for ou while permanecessem acessíveis fora desses blocos, gerando comportamentos confusos e erros difíceis de identificar. Para corrigir esse problema, o ES6 introduziu o let, que cria variáveis com escopo de bloco e só pode ser acessado dentro do trecho onde foi declarado, tornando o comportamento mais previsível. Já o const segue as mesmas regras de escopo do let, mas é usado para valores que não devem ser reatribuídos após a declaração, sendo ideal para constantes ou objetos cuja referência não muda. Essas novidades tornaram o código mais seguro e coerente, aproximando o JavaScript moderno da clareza encontrada em linguagens tipadas tradicionais.
var:
Escopo de função.
Sofre hoisting*.
Comportamento imprevisível em blocos (if, for, while).
let:
Escopo de bloco.
Mais seguro e previsível.
Não permite ser acessado antes da declaração (temporal dead zone**).
const:
Também tem escopo de bloco.
Valor não pode ser reatribuído.
Ideal para constantes e objetos que não mudam de referência.
*Hoisting: É o comportamento do JavaScript em que declarações de variáveis e funções são movidas para o topo do escopo antes da execução do código. Isso faz com que var e funções declaradas sejam reconhecidas mesmo antes de aparecerem no código, embora var seja inicializado como undefined.
**Temporal Dead Zone (TDZ): É o período entre o início do escopo e o momento da declaração da variável let ou const, em que a variável existe, mas não pode ser acessada. Qualquer tentativa de leitura antes da declaração causa ReferenceError.
Exemplo:
if (true) {
let x = 10;
}
console.log(x); // ReferenceError
Arrow Functions
O ES6 introduziu a sintaxe de arrow functions, que torna funções anônimas mais curtas e claras:
const dobro = x => x * 2;
Comparado à forma antiga:
function dobro(x) {
return x * 2;
}
Além da redução de código, as arrow functions também possuem um comportamento especial em relação ao this. Diferentemente das funções tradicionais, elas não criam seu próprio contexto de execução, herdando automaticamente o this do escopo em que foram definidas. Isso evita comportamentos inesperados muito comuns em JavaScript, especialmente quando funções são usadas como callbacks.
Por exemplo, em funções tradicionais usadas como callbacks de eventos, o valor de this pode mudar dependendo de quem chama a função (navegador, objeto, DOM, etc.), o que obriga o desenvolvedor a usar técnicas como bind(), call() ou that = this. Já com arrow functions, o this permanece estável e previsível, o que simplifica o código e reduz erros em operações assíncronas e em manipulações de arrays.
Method Shorthand: métodos mais concisos em objetos
No JavaScript tradicional, antes do ES6, a criação de métodos dentro de objetos dependia do uso da palavra-chave function, o que deixava o código mais verboso e menos elegante. Com o ES6, surgiu o method shorthand, uma forma de declarar métodos com uma sintaxe mais curta e clara. Esse recurso não altera o funcionamento dos métodos, mas simplifica a escrita e melhora a legibilidade — especialmente em objetos com muitas funções internas. Esse recurso é justamente o cobrado em questões que pedem “criação de métodos de forma mais concisa”.
Antes do ES6:
const usuario = {
nome: “Luana”,
falar: function() {
return “Olá!”;
}
};
Com ES6:
const usuario = {
nome: “Luana”,
falar() {
return “Olá!”;
}
};
Template Literals: interpolação moderna
As template literals representam uma das melhorias mais práticas trazidas pelo ES6. Antes delas, concatenar strings exigia o uso repetido do operador +, o que tornava o código extenso e difícil de ler, especialmente em textos multilinha. Com a nova sintaxe, baseada em crases (), é possível escrever textos longos de forma natural e interpolar valores com ${}, permitindo inserir variáveis diretamente na string sem quebrar a fluidez do código. Além disso, template literals facilitam a criação de HTML dinâmico, mensagens formatadas e logs mais claros, sendo amplamente usados em bibliotecas frontend e backend. É um recurso simples, mas que transformou a forma como trabalhamos com strings no JavaScript. const nome = "Bárbara"; console.log(Olá, ${nome}!`);
Destructuring, Spread e Rest
O ES6 trouxe avanços importantes na manipulação de estruturas de dados.
Destructuring: É uma forma de extrair valores de objetos ou arrays e atribuí-los diretamente a variáveis de maneira mais clara e concisa. Em vez de acessar cada propriedade manualmente, o destructuring “desmonta” a estrutura e captura os valores desejados.
const pessoa = { nome: “Ana”, idade: 25 };
const { nome, idade } = pessoa;
Spread: O operador spread permite expandir arrays ou objetos em seus elementos individuais. Ele é usado para copiar, combinar ou descompactar estruturas, facilitando a composição de listas e objetos sem mutar os originais.
const lista = [1, 2, …[3, 4]];
Rest: O operador rest funciona como o oposto do spread: em vez de expandir, ele agrupa vários valores em um único array. É útil para funções que recebem quantidade variável de argumentos ou quando queremos capturar o “restante” dos valores de um array ou objeto.
function soma(…numeros) {
return numeros.reduce((a, b) => a + b);
}
Classes e Orientação a Objetos
Embora o JavaScript sempre tenha sido orientado a protótipos, sua sintaxe original dificultava a vida de quem vinha de linguagens como Java, C# ou Python. O ES6 introduziu a palavra-chave class, oferecendo uma forma mais intuitiva e estruturada de trabalhar com orientação a objetos. Essa nova sintaxe não muda o modelo interno da linguagem, mas torna mais fácil declarar construtores, métodos e heranças. Com isso, aplicações de grande porte ficam mais organizadas e fáceis de manter. Hoje, praticamente todos os frameworks modernos — como Angular, React, NestJS e diversos padrões de projeto — utilizam classes do ES6, tornando esse recurso essencial para quem desenvolve aplicações profissionais e para quem se prepara para concursos da área.
class Animal {
constructor(nome) {
this.nome = nome;
}
falar() {
return ${this.nome} fez um som.;
}
}
Módulos (import/export)
Antes do ES6, a linguagem dependia de soluções externas como CommonJS (Node.js) ou AMD (RequireJS) para permitir divisão de código em módulos. Isso gerava inconsistências e dificultava a padronização. O ES6 resolveu esse problema ao introduzir o sistema nativo de módulos com import e export, permitindo que arquivos compartilhem funções, classes e constantes de maneira clara e organizada. Esse é um recurso fundamental para aplicações modernas, pois facilita o reuso de código, melhora a manutenção e torna as dependências explícitas. Hoje, qualquer projeto estruturado em JavaScript ou TypeScript utiliza módulos ES6, desde bibliotecas simples até grandes sistemas corporativos.
export function soma(a, b) {
return a + b;
}
import { soma } from “./utils.js”;
Agora, vamos ver como esses assuntos são cobrados nos concursos!
1) CONSULPAM – 2025 – CONAB – Analista de TI (Desenvolvimento)
Considere o seguinte trecho de código em JavaScript (ES6+) construído por um desenvolvedor:
function exemplo(flag) {
if (flag) {
let valor = ‘ativo’;
} else {
var valor = ‘inativo’;
}
return valor;
}
console.log(exemplo(true));
Diante do exposto, assinale a alternativa CORRETA.
O código imprime “ativo”, pois a variável valor é declarada dentro do bloco if com let, e como flag é true, essa é a única atribuição executada.
O código imprime “inativo”, pois a declaração com var é movida para o topo da função, e como flag é true, a variável permanece com valor undefined, sendo posteriormente atribuída como “inativo”.
O código lança um erro de referência (ReferenceError), pois a variável valor declarada com let está em escopo de bloco e não é acessível fora do if, enquanto a declaração com var não é executada quando flag é true.
O código lança um erro de tipo (TypeError), pois a linguagem não permite múltiplas declarações de variáveis com nomes iguais em blocos distintos, mesmo que com let e var.
Gabarito: C
Comentário: A variável valor declarada com let está limitada ao bloco do if.
Quando flag = true, essa é a única declaração executada — mas ela não existe fora do bloco.
A variável declarada com var sofre hoisting, mas sua atribuição só ocorre dentro do else, que não é executado.
Ao chegar em return valor, o interpretador tenta resolver uma variável cuja resolução está bloqueada pelo escopo do let, gerando ReferenceError.
Incorreta: A alternativa desconsidera que variáveis declaradas com let possuem escopo de bloco, ou seja, só existem dentro do if. Assim, mesmo que o valor “ativo” seja atribuído, essa variável deixa de existir ao sair do bloco, impossibilitando seu uso no return.
Incorreta: Embora seja verdade que declarações com var sofrem hoisting, a alternativa interpreta o comportamento de maneira equivocada. No cenário em que flag é true, o bloco do else não é executado, portanto a variável valor nunca recebe “inativo”. Além disso, o erro real ocorre antes — devido ao conflito com o let em escopo de bloco — e não por causa do hoisting.
Correta: O erro acontece porque o let valor declarado dentro do if cria uma variável isolada ao bloco, que não pode ser acessada no return. Ao mesmo tempo, o var valor do else não é inicializado quando o else não é executado. O resultado é um ReferenceError, exatamente como afirma a alternativa.
Incorreta: O JavaScript permite declarar variáveis com o mesmo nome usando let e var, desde que estejam em escopos distintos (bloco vs função). Isso não gera TypeError e não está relacionado ao erro observado no código.
2) CS-UFG – 2024 – TJ-AC – Analista Judiciário (TI)
O ECMAScript 6 (ES6), lançado em 2015, introduziu várias novas funcionalidades e melhorias significativas na linguagem JavaScript, incluindo novas maneiras de trabalhar com variáveis, melhorias na orientação a objetos, novos métodos para arrays, e outras funcionalidades.
No ES6, o recurso que permite a criação de objetos com métodos mais concisos é o:
Constructor shorthand
Method shorthand
Object literals
Prototype inheritance
Gabarito: B
Comentário: O method shorthand permite escrever:
const obj = {
falar() {
return “Olá!”;
}
};
Sem a necessidade de:
falar: function() { … }
Incorreta: O termo constructor shorthand não existe na especificação do ES6. Não há qualquer recurso com esse nome relacionado à criação de métodos ou simplificação de objetos, portanto a alternativa apresenta um conceito inexistente.
Correta: O method shorthand é exatamente o recurso introduzido pelo ES6 que permite declarar métodos dentro de objetos usando uma sintaxe mais concisa, sem a palavra-chave function. É a forma moderna e recomendada de definir métodos em objetos literais.
Incorreta: Embora os object literals sejam a estrutura na qual o method shorthand é aplicado, o termo não identifica o recurso específico cobrado. Objetos literais existem desde as primeiras versões da linguagem e não correspondem à melhoria sintática introduzida pelo ES6.
Incorreta: A prototype inheritance (herança baseada em protótipos) é um mecanismo fundamental da linguagem desde sua criação. Ela não é uma funcionalidade nova do ES6 e não tem relação com a sintaxe mais concisa de métodos.
Conclusão
O ES6 transformou o JavaScript na linguagem moderna e poderosa que usamos hoje. Ao introduzir novos recursos de escopo, funções, objetos, classes e módulos, ele tornou o desenvolvimento mais seguro, expressivo e organizado. Por isso, compreender suas funcionalidades é essencial para quem trabalha com tecnologias web e para quem se prepara para concursos de TI.
Referências
MDN Web Docs.
Flanagan, David. JavaScript: The Definitive Guide (7th Edition). O’Reilly Media, 2020.
Zakas, Nicholas. Understanding ECMAScript 6. No Starch Press, 2016.
Freeman, Adam. Pro Modern JavaScript. Apress, 2021.
ECMA International. ECMAScript Language Specification (ECMA-262).
Fonte: Gran Cursos Online
Download disponível – ECMAScript (ES6+)