Alexandre Akira

Posted on Nov 18, 2023 • Edited on Nov 28

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

#javascript #ecmascript #learning #features

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.

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.

Top comments (1)

SavioLuizz • Nov 20 '23

🔥🔥🔥

DEV Community