ES6, ES7, ES8... Espera, que Funcionalidade é essa?🤷‍♂️

Um pouco de história sobre o Javascript

Se você já ta nesse mundo do Javascript já deve ter escutado falar sobre ECMAScript.

E o que é?

ECMAScript é uma especificação de linguagem de scripts padronizada pelo ECMA-262, inspirada no JavaScript.

O ECMAScript é a própria linguagem JavaScript (choque), sim apenas continuamos chamando de Javascript por conveniência, por costume. Sendo assim ECMAScript o nome oficial da linguagem ECMAScript.

NÓS USAMOS ECMASCRIPT, NÃO JAVASCRIPT.

Table of contents

• ES1
• ES2
• ES3
• ES4
• ES5
• ES6
• ECMAScript 2016
• ECMAScript 2017
• ECMAScript 2018
• ECMAScript 2019
• ECMAScript 2020
• ECMAScript 2021
• ECMAScript 2022
• ECMAScript 2023

E o que é ES7, ES8, ECMAScript 2018...

Como toda linguagem de programação, ela tem suas versões e vai sendo atualizada com o tempo. Logo Nossa querida ECMAScript também.

As versões ECMAScript foram abreviadas para ES1, ES2, ES3, ES5 e ES6.

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

E porque eu preciso me preocupar com as versões?

Como o ECMAScript é uma linguagem majoritariamente rodada em navegadores, nem sempre sua evolução é acompanhada pelos navegadores.

Então temos ferramentas como Babel, Webpack, Turbopack, Rollup e até mesmo o Typescript, que vai permitir a gente escrever códigos modernos sem se preocupar com a compatibilidade dos navegadores.

Lembrando que o papel dessas ferramentas é muito mais que apenas transformar código moderno em velho.

Funcionalidade de cada versão do ECMAScript

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

Como são muitas funcionalidades não vou me aprofundar em todas e vou colocar um 🚀 para aqueles que eu gostar e/ou achar mais úteis.

Meu objetivo aqui não é explica como funciona cada funcionalidade e sim mostrar o que foi adicionado em cada versão.

ES1 (ECMAScript 1997)

O ECMAScript1 (ES1) também conhecido como ECMAScript 1997.

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

ES2 (ECMAScript 1998)

O ECMAScript2 (ES2) também conhecido como ECMAScript 1998.

A segunda versão do ECMAScript foi lançada em 1998. Ela contém apenas pequenas alterações em comparação com a primeira versão.

ES3 (ECMAScript 1999)

O ECMAScript3 (ES3) também conhecido como ECMAScript 1999.

• Expressões Regulares🚀
• Adicionado try/catch 🚀
• Adicionado switch 🚀
• Adicionado do-while

São funcionalidades básicas de quase toda linguagem.

Ainda bem né, incrível era não ter antes essas.

ES4 (nunca foi lançado)

A quarta versão do ECMAScript estava em desenvolvimento, mas acabou sendo abandonada devido a diferenças de opinião sobre os rumos da linguagem. 🤷‍♂️

ES5 (ECMAScript 2009)

Depois de um longo período sem atualizações, finalmente temos uma atualização com muitas coisas novas

O ECMAScript5 (ES5) 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.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}'

• Date.now() 🚀

// timestamp
Date.now() // 1700318490184

• Date toISOString()
• Date toJSON()
• Propriedades de Getters e Setters
• Permite palavras reservadas como nome de propriedades (porque não né)
• Object methods
• Object defineProperty()
• Function bind()
• Permite virgular final em Arrays e Objetos (legal, mas nada demais) 🚀

// Antes:
const oldUser = {
    name: "Alexandre",
    idade: 24
}

// Novo:
const user = {
    name: "Alexandre",
    idade: 24, // ← Essa virgula na ultima propriedade é permitida agora
}

ES6 (ECMAScript 2015)

O ECMAScript6 (ES6) também conhecido como ECMAScript 2015.

• let e const keyword 🚀
• Arrow functions (O maior de todos) 🚀

const numeros = [1, 2, 3, 4, 5]
const elevado2 = numeros.map((numero) => numero * numero) // [1, 4, 9, 16, 25]

• Operador Spread (...) 🚀

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 cars) {  
}

• 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 com JS) 🚀

const promise = new Promise((resolve, reject) => {  
  setTimeout(() => {
      resolve("3 segundos");
  }, 3000);  
});

promise.then(v => console.log(v)) // Depois de 3 segundos vai aparecer

• Symbol
• Parâmetros default 🚀

function soma(x, y = 10) {  
  return x + y;  
}  
soma(5); // 15

• Parâmetros Rest nas 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 Métodos do Math

  • Math.trunc() 🚀

  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
  

  • Math.sign()
  • Math.cbrt()
  • Math.log2()
  • Math.log10()

• Novas propriedades do Number

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

• Novos Métodos do Number

  • Number.isInteger()
  • Number.isInteger()

• isFinite()

• isNaN() 🚀

• Object entries 🚀
  
  

const frutas = ["Banana", "Laranja", "Maçã", "Manga"];  

for (let x of frutas.entries()) {
  console.log(x[0]) // 0, 1, 2, 3
  console.log(x[1]) // "Banana", "Laranja", "Maçã", "Manga"
}

• Modules (import, export) 🚀
• Template String 🚀

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

ECMAScript 2016

• Exponenciação (* *) 🚀

// 5^2
const expo = 5 ** 2 // 25

• Atribuição Exponenciação (**=)
• Array includes() 🚀

ECMAScript 2017

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

ECMAScript 2018

• Iteração async
• Promise Finally
• Propriedade rest em Objetos 🚀

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };  
x; // 1  
y; // 2  
z; // { a: 3, b: 4 }

• Novas funcionalidades no RegExp

ECMAScript 2019

• String.trimStart()
• String.trimEnd()
• Object.fromEntries()
• Parâmetro no Catch opcional
• Array.flat()
• Array.flatMap()
• Array.Sort() revisado
• JSON.stringify() revisado
• Function.toString() revisado
• Permite símbolos na string

ECMAScript 2020

• BigInt
• String MatchAll()
• Operador Nullish Coalescing 🚀

const nome = null ?? "Alexandre" // "Alexandre"

• Operador optional Chaining 🚀

const user = {
    nome: "Alexandre"
    idade: 24
}

user?.tech // undefined

• Atribuição com AND (&&=)
• Atribuição com OR (||=)
• Atribuição com Nullish Coalescing (??=)
• Promise allSettled():
• Dynamic Import

ECMAScript 2021

• Promise any() 🚀

const first = await Promise.any([prom1,prom2,prom3]); // Retorna a primeira que terminar

• String replaceAll() 🚀
• Separação numérica (_) 🚀

const mil = 1_000
const milhao = 1_000_000
const bilhao = 1_000_000_000;

ECMAScript 2022

• Array at() 🚀

const numeros = [1, 2, 3, 4, 5]
numeros[numeros.length - 1] // 5
numeros.at(-1) // 5

• String at() 🚀

const texto = "hello world"
texto[numeros.length - 1] // d
texto.at(-1) // d

• RegExp /d
• Object.hasOwn()
• error.cause
• await import 🚀

const { func } = await import("./module")
func("a", "b")

• Métodos e campos Private

ECMAScript 2023

• findLast e findLastIndex
• Copias de Array :
  • toReversed()
  • toSorted()
  • toSpliced()
  • with()
• Hashbang Grammar (#!)
• WeakMaps com Symbols

ECMAScript 2024 o que esperar?

Temos já propostas importantes para o ECMAScript2024. Embora ainda estejam nos estágios iniciais de aprovação, elas prometem avanços interessantes para JavaScript.

• Temporal API

// Velho
let now = new Date();
let currentYear = now.getFullYear();
console.log(currentYear);

// Novo
let now = Temporal.now.plainDate();
let currentYear = now.year;
console.log(currentYear);

• *Pipeline Operator (|>) * (Ansioso para esse 🤩🤩)🚀

// Antigo
const double = (x) => x * 2;
const addFive = (x) => x + 5;

const result = addFive(double(10)); // 25

// Novo
const double = (x) => x * 2;
const addFive = (x) => x + 5;

const result = 10 |> double |> addFive; // 25

• Error Cause
  • Novas propriedades do Error para ajudar a debbugar.

Conclusão

Sempre estamos recebendo novas atualizações e a comunidade é bem ativa fazendo varias propostas. A linguagem sempre ta em constante evolução trazendo melhorias na sintaxe até adições significativas de funcionalidades.

Essas atualizações não apenas simplificam a escrita de código, tornando-o mais eficiente e legível, mas também capacitam os desenvolvedores a explorarem abordagens inovadoras. Cada versão temos funcionalidades que achamos mais uteis, mas só de termos a possibilidade de utilizar é muito bom.