DEV Community

Cover image for ES6, ES7, ES8... Espera, que Funcionalidade é essa?🤷‍♂️
Alexandre Akira
Alexandre Akira

Posted on • Updated on

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.

pessoa surpresa


Table of contents


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"
Enter fullscreen mode Exit fullscreen mode
  • Multiline strings
  • String.trim() 🚀
const texto = "  Hello world    "
texto.trim() // "Hello world"
Enter fullscreen mode Exit fullscreen mode
  • 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
}
*/
Enter fullscreen mode Exit fullscreen mode
  • JSON.stringify() 🚀
const user = {
    name: "Alexandre",
    idade: 24
}
JSON.stringify(user) // '{"nome":"Alexandre", "idade":24}'
Enter fullscreen mode Exit fullscreen mode
  • Date.now() 🚀
// timestamp
Date.now() // 1700318490184
Enter fullscreen mode Exit fullscreen mode
  • 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
}
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode
  • Operador Spread (...) 🚀
const numbers = [23,55,21,87,56];  
const maxValue = Math.max(...numbers); // 87
Enter fullscreen mode Exit fullscreen mode
  • for/of loop 🚀
const carros = ["BMW", "Volvo", "Mini"];  

for (let x of cars) {  
}
Enter fullscreen mode Exit fullscreen mode
  • Map 🚀
  • Set 🚀
const numeros = [1, 2, 3, 1, 4, 3]

const removerDuplicatas = new Set(numeros) // Set {1, 2, 3, 4}
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • Symbol
  • Parâmetros default 🚀
function soma(x, y = 10) {  
  return x + y;  
}  
soma(5); // 15
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • String.includes() 🚀
const text = "Hello world";  
text.includes("world") // true
Enter fullscreen mode Exit fullscreen mode
  • String.startsWith()
  • String.endsWith()
  • Array.from()
  • Array keys()
  • Array find() 🚀
const numbers = [4, 9, 16, 25, 29];  
numbers.find((number) => number === 16); // 16
Enter fullscreen mode Exit fullscreen mode
  • Array findIndex() 🚀
const numbers = [4, 9, 16, 25, 29];  
numbers.findIndex((number) => number === 16); // 2
Enter fullscreen mode Exit fullscreen mode
  • 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"
}
Enter fullscreen mode Exit fullscreen mode
  • Modules (import, export) 🚀
  • Template String 🚀
const nome = "alexandre"
console.log(`meu nome é ${nome}`)
Enter fullscreen mode Exit fullscreen mode

ECMAScript 2016

  • Exponenciação (* *) 🚀
// 5^2
const expo = 5 ** 2 // 25
Enter fullscreen mode Exit fullscreen mode
  • 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 }
Enter fullscreen mode Exit fullscreen mode
  • 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"
Enter fullscreen mode Exit fullscreen mode
  • Operador optional Chaining 🚀
const user = {
    nome: "Alexandre"
    idade: 24
}

user?.tech // undefined
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • String replaceAll() 🚀
  • Separação numérica (_) 🚀
const mil = 1_000
const milhao = 1_000_000
const bilhao = 1_000_000_000;
Enter fullscreen mode Exit fullscreen mode

ECMAScript 2022

  • Array at() 🚀
const numeros = [1, 2, 3, 4, 5]
numeros[numeros.length - 1] // 5
numeros.at(-1) // 5
Enter fullscreen mode Exit fullscreen mode
  • String at() 🚀
const texto = "hello world"
texto[numeros.length - 1] // d
texto.at(-1) // d
Enter fullscreen mode Exit fullscreen mode
  • RegExp /d
  • Object.hasOwn()
  • error.cause
  • await import 🚀
const { func } = await import("./module")
func("a", "b")
Enter fullscreen mode Exit fullscreen mode
  • 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);
Enter fullscreen mode Exit fullscreen mode
  • *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
Enter fullscreen mode Exit fullscreen mode
  • 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.

Top comments (1)

Collapse
 
savioluizz profile image
SavioLuizz

🔥🔥🔥