Skip to contentPular para o conteúdo
<A4 />
ES6, ES7, ES8... Espera, que Funcionalidade é essa?

November 18, 2023 18 de novembro de 2023

ES6, ES7, ES8... Espera, que Funcionalidade é essa?

Um guia completo sobre as versões do ECMAScript e as funcionalidades adicionadas em cada uma, desde ES1 até ECMAScript 2023.

JavaScript ECMAScript Frontend
Table of ContentsÍndice

Um Pouco de História Sobre JavaScript

Se você já está no mundo do JavaScript, provavelmente já ouviu falar sobre ECMAScript.

O que é isso?

ECMAScript é uma especificação padronizada para linguagens de script definida pela ECMA-262, inspirada no JavaScript.

ECMAScript é na verdade o próprio JavaScript (chocante!), mas continuamos chamando de JavaScript por conveniência e hábito. Portanto, ECMAScript é o nome oficial da linguagem.

NÓS USAMOS ECMASCRIPT, NÃO JAVASCRIPT.

Pessoa surpresa

O que são ES7, ES8, ECMAScript 2018…

Como toda linguagem de programação, ela tem versões e é atualizada ao longo do tempo. Nosso querido ECMAScript também.

As versões do ECMAScript eram abreviadas como ES1, ES2, ES3, ES5 e ES6.

Desde 2016 oficialmente, as versões são nomeadas por ano (ECMAScript 2016, 2017, 2018, 2019, 2020, …), mas você pode encontrar documentação ainda chamando de ES7, ES8, etc.

Por que Preciso me Importar com Versões?

Como o ECMAScript é predominantemente executado em navegadores, a evolução dos navegadores nem sempre acompanha o desenvolvimento da linguagem.

É por isso que temos ferramentas como Babel, Webpack, Turbopack, Rollup e até TypeScript, que nos permitem escrever código moderno sem nos preocupar com compatibilidade de navegadores.

Lembre-se de que essas ferramentas fazem muito mais do que apenas transformar código moderno em código antigo.

Funcionalidades de Cada Versão do ECMAScript

Vou listar TODAS (pelo menos até onde encontrei) as funcionalidades implementadas em cada versão lançada.

Como são muitas funcionalidades, não vou me aprofundar em todas e colocarei um 🚀 para aquelas que gosto e/ou acho mais úteis.

Meu objetivo aqui não é explicar como cada funcionalidade funciona, mas sim mostrar o que foi adicionado em cada versão.

ES1 (ECMAScript 1997)

Também conhecido como ECMAScript 1997.

A primeira versão do ECMAScript foi lançada em 1997. Foi criada com base no JavaScript e incluía funcionalidades como variáveis, funções e instruções básicas de fluxo de controle.

ES2 (ECMAScript 1998)

Também conhecido como ECMAScript 1998.

A segunda versão foi lançada em 1998. Contém apenas pequenas alterações em relação à primeira versão.

ES3 (ECMAScript 1999)

Também conhecido como ECMAScript 1999.

  • Regular Expressions 🚀
  • Adicionado try/catch 🚀
  • Adicionado switch 🚀
  • Adicionado do-while

Funcionalidades básicas encontradas em quase todas as linguagens.

ES4 (Nunca Lançado)

A quarta versão estava em desenvolvimento, mas acabou sendo abandonada por causa de desacordos sobre a direção da linguagem. 🤷‍♂️

ES5 (ECMAScript 2009)

Após um longo período sem atualizações, finalmente temos uma atualização com muitas novidades.

Também conhecido como ECMAScript 2009.

  • “use strict”
  • String[number] 🚀
const texto = "Hello world"
texto[0] // "H"
  • Multiline strings
  • String.trim() 🚀
const texto = " Hello world "
texto.trim() // "Hello world"

Array

  • Array.isArray() 🚀
const frutas = ["Banana", "Laranja", "Maçã", "Manga"];
const texto = "Hello world"

Array.isArray(frutas) // true
Array.isArray(texto) // false
  • Array forEach 🚀
function mostrar(value) {
  return console.log(value)
}

const numbers = [45, 4, 9, 16, 25];
numbers.forEach(mostrar);
  • Array map() 🚀
function somar5(value) {
  return value + 5
}

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(somar5); // [ 50, 9, 14, 21, 30 ]
  • Array filter() 🚀
function maiorDeIdade(value) {
  return value > 18;
}

const idades = [45, 4, 9, 16, 25];
const mais18 = idades.filter(maiorDeIdade); // [ 45, 25 ]
  • Array reduce() 🚀
function somar(acumulador, atual) {
  return acumulador + atual;
}

const numbers = [45, 4, 10, 16, 25];
const sum = numbers.reduce(somar, 0); // 100
  • Array reduceRight
  • Array.every() 🚀
function maiorDeIdade(value) {
  return value > 18;
}

const idades = [45, 4, 9, 16, 25];
const todosMais18 = idades.every(maiorDeIdade); // false
  • Array.some() 🚀
function maiorDeIdade(value) {
  return value > 18;
}

const idades = [45, 4, 9, 16, 25];
const todosMais18 = idades.some(maiorDeIdade); // true
  • Array.indexOf() 🚀
const frutas = ["Banana", "Laranja", "Maçã", "Manga"];
frutas.indexOf("Laranja"); // 1
  • Array.lastIndexOf()

JSON

  • JSON.parse() 🚀
const user = '{"nome":"Alexandre", "idade":24}'
JSON.parse(user)
/* ^? {
  name: "Alexandre",
  idade: 24
}
*/
  • JSON.stringify() 🚀
const user = {
  name: "Alexandre",
  idade: 24
}
JSON.stringify(user) // '{"nome":"Alexandre", "idade":24}'

Outros

  • Date.now() 🚀
// timestamp
Date.now() // 1700318490184
  • Date toISOString()
  • Date toJSON()
  • Getter e Setter properties
  • Permite palavras reservadas como nomes de propriedade
  • Object methods
  • Object defineProperty()
  • Function bind()
  • Permite trailing commas em Arrays e Objects 🚀
// Antes:
const oldUser = {
  name: "Alexandre",
  idade: 24
}

// Novo:
const user = {
  name: "Alexandre",
  idade: 24, // ← Essa vírgula na última propriedade agora é permitida
}

ES6 (ECMAScript 2015)

Também conhecido como ECMAScript 2015.

  • let e const 🚀
  • Arrow functions (A maior de todas) 🚀
const numeros = [1, 2, 3, 4, 5]
const elevado2 = numeros.map((numero) => numero * numero) // [1, 4, 9, 16, 25]
  • Spread Operator (…) 🚀
const numbers = [23, 55, 21, 87, 56];
const maxValue = Math.max(...numbers); // 87
  • for/of loop 🚀
const carros = ["BMW", "Volvo", "Mini"];

for (let x of carros) {
}
  • Map 🚀
  • Set 🚀
const numeros = [1, 2, 3, 1, 4, 3]

const removerDuplicatas = new Set(numeros) // Set {1, 2, 3, 4}
  • Classes 🚀
  • Promises (Nasce o backend JavaScript) 🚀
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("3 segundos");
  }, 3000);
});

promise.then(v => console.log(v)) // Aparece depois de 3 segundos
  • Symbol
  • Default Parameters 🚀
function soma(x, y = 10) {
  return x + y;
}
soma(5); // 15
  • Rest Parameters em Funções 🚀
function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

sum(4, 9, 16, 25, 29, 100, 66, 77); // 326
  • String.includes() 🚀
const text = "Hello world";
text.includes("world") // true
  • String.startsWith()
  • String.endsWith()
  • Array.from()
  • Array keys()
  • Array find() 🚀
const numbers = [4, 9, 16, 25, 29];
numbers.find((number) => number === 16); // 16
  • Array findIndex() 🚀
const numbers = [4, 9, 16, 25, 29];
numbers.findIndex((number) => number === 16); // 2
  • Novos Math Methods
    • Math.trunc() 🚀
    • Math.sign()
    • Math.cbrt()
    • Math.log2()
    • Math.log10()
Math.trunc(4.9);   // 4
Math.trunc(4.7);   // 4
Math.trunc(4.4);   // 4
Math.trunc(4.2);   // 4
Math.trunc(-4.2);  // -4

  • Novas Number Properties

    • Number.EPSILON
    • Number.MIN_SAFE_INTEGER
    • Number.MAX_SAFE_INTEGER

  • Novos Number Methods

    • Number.isInteger()

  • isFinite()

  • isNaN() 🚀

  • Object entries 🚀

  • Modules (import, export) 🚀

  • Template String 🚀

const nome = "alexandre"
console.log(`meu nome é ${nome}`)

ECMAScript 2016

  • Exponenciação ()** 🚀
// 5^2
const expo = 5 ** 2 // 25
  • Exponentiation Assignment (**=)
  • Array includes() 🚀

ECMAScript 2017

  • String padding
  • Object entries() 🚀
  • Object values() 🚀
  • async e await (nunca mais then) 🚀

ECMAScript 2018

  • Async iteration
  • Promise Finally
  • Object rest property 🚀
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }
  • Novas funcionalidades RegExp

ECMAScript 2019

  • String.trimStart()
  • String.trimEnd()
  • Object.fromEntries()
  • Optional Catch parameter
  • Array.flat()
  • Array.flatMap()
  • Array.Sort() revisado
  • JSON.stringify() revisado
  • Function.toString() revisado
  • Permite symbols em strings

ECMAScript 2020

  • BigInt
  • String MatchAll()
  • Nullish Coalescing Operator 🚀
const nome = null ?? "Alexandre" // "Alexandre"
  • Optional Chaining Operator 🚀
const user = {
  name: "Alexandre",
  address: {
    street: "Rua A"
  }
}

user.address?.street // "Rua A"
user.phone?.number // undefined (sem erro)
  • Promise.allSettled()
  • Dynamic import()
  • globalThis

ECMAScript 2021

  • String.replaceAll()
  • Promise.any()
  • WeakRef e FinalizationRegistry
  • Logical Assignment Operators
let x = 1;
x &&= 2; // x = 2 (AND assignment)

let y = false;
y ||= 5; // y = 5 (OR assignment)

let z = null;
z ??= 10; // z = 10 (Nullish assignment)
  • Numeric separators 🚀
const num = 1_000_000_000; // 1000000000

ECMAScript 2022

  • Top-level await
  • Class fields e private methods 🚀
  • Static class methods e fields
  • Array.at() 🚀
const array = [1, 2, 3, 4, 5];
array.at(-1); // 5 (último elemento)
array.at(-2); // 4 (penúltimo)
  • String.at()
  • Object.hasOwn()
  • Error cause
try {
  // algum código
} catch (error) {
  throw new Error("Operação falhou", { cause: error });
}
  • RegExp match indices

ECMAScript 2023

  • Array findLast() e findLastIndex() 🚀
const numbers = [1, 2, 3, 4, 5];
numbers.findLast((n) => n > 3); // 5
numbers.findLastIndex((n) => n > 3); // 4
  • Array toReversed(), toSorted(), toSpliced()
  • String toWellFormed() e isWellFormed()
  • Symbol como chaves de WeakMap
  • Métodos de cópia de Array (Change Array by copy)

Share this articleCompartilhe este artigo

X LinkedIn