ES6, ES7, ES8... Espera, que Funcionalidade é essa?🤷‍♂️
Tags: javascript, ecmascript, learning, features
Published: 2023-11-18 16:10:01

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8i7k6sza5k2y73d85lt.png)

---

## Table of contents

- [ES1](#es1-ecmascript-1997)
- [ES2](#es2-ecmascript-1998)
- [ES3](#es3-ecmascript-1999)
- [ES4](#es4-nunca-foi-lançado)
- [ES5](#es3-ecmascript-2009)
- [ES6](#es6-ecmascript-2015)
- [ECMAScript 2016](#ecmascript-2016)
- [ECMAScript 2017](#ecmascript-2017)
- [ECMAScript 2018](#ecmascript-2018)
- [ECMAScript 2019](#ecmascript-2019)
- [ECMAScript 2020](#ecmascript-2020)
- [ECMAScript 2021](#ecmascript-2021)
- [ECMAScript 2022](#ecmascript-2022)
- [ECMAScript 2023](#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_]` 🚀
```js
const texto = "Hello world"
texto[0] // "H"
```
- Multiline strings
- **String.trim()** 🚀
```js
const texto = "  Hello world    "
texto.trim() // "Hello world"
```
- Array
	- **Array.isArray()** 🚀
	```js
	const frutas = ["Banana", "Laranja", "Maçã", "Manga"];
	const texto = "Hello world"
	
	Array.isArray(frutas) // true
	Array.isArray(texto)  // false
	```
	- **Array forEach** 🚀
	```js
	function mostrar(value) {
		return console.log(value)
	}
	
	const numbers = [45, 4, 9, 16, 25];  
	numbers.forEach(mostrar);
	```
	- **Array map()** 🚀
	```js
	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()** 🚀
	```js
	function maiorDeIdade(value) {  
	  return value > 18;  
	}
	
	const idades = [45, 4, 9, 16, 25];  
	const mais18 = idades.filter(maiorDeIdade); // [ 45, 25 ]
	```
	- **Array reduce()** 🚀
	```js
	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()** 🚀
	```js
	function maiorDeIdade(value) {  
	  return value > 18;  
	}
	
	const idades = [45, 4, 9, 16, 25];  
	const todosMais18 = idades.every(maiorDeIdade); // false
	```
	- **Array.some()** 🚀
	```js
	function maiorDeIdade(value) {  
	  return value > 18;  
	}
	
	const idades = [45, 4, 9, 16, 25];  
	const todosMais18 = idades.some(maiorDeIdade); // true
	```
	- **Array.indexOf()** 🚀
	```js
	const frutas = ["Banana", "Laranja", "Maçã", "Manga"]; 
	frutas.indexOf("Laranja"); // 1
	```
	- Array.lastIndexOf()
- **JSON.parse()** 🚀
```js
const user = '{"nome":"Alexandre", "idade":24}'
JSON.parse(user)
/* ^? {
	name: "Alexandre",
	idade: 24
}
*/
```
- **JSON.stringify()** 🚀
```js
const user = {
	name: "Alexandre",
	idade: 24
}
JSON.stringify(user) // '{"nome":"Alexandre", "idade":24}'
```
- **Date.now()** 🚀
```js
// 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)** 🚀
```js
// 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)** 🚀
```js
const numeros = [1, 2, 3, 4, 5]
const elevado2 = numeros.map((numero) => numero * numero) // [1, 4, 9, 16, 25]
```
- **Operador Spread (...) 🚀**
```js
const numbers = [23,55,21,87,56];  
const maxValue = Math.max(...numbers); // 87
```
- **for/of loop 🚀**
```js
const carros = ["BMW", "Volvo", "Mini"];  
  
for (let x of cars) {  
}
```
- **Map 🚀**
- **Set 🚀**
```js
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)** 🚀
```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** 🚀
```js
function soma(x, y = 10) {  
  return x + y;  
}  
soma(5); // 15
```
- **Parâmetros Rest nas funções** 🚀
```js
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()** 🚀
```js
const text = "Hello world";  
text.includes("world") // true
```
- String.startsWith()
- String.endsWith()
- Array.from()
- Array keys()
- **Array find()** 🚀
```js
const numbers = [4, 9, 16, 25, 29];  
numbers.find((number) => number === 16); // 16
```
- **Array findIndex()** 🚀
```js
const numbers = [4, 9, 16, 25, 29];  
numbers.findIndex((number) => number === 16); // 2
```
- Novos Métodos do Math
	-  **Math.trunc()** 🚀
	```js
	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** 🚀
```js
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 🚀
```js
const nome = "alexandre"
console.log(`meu nome é ${nome}`)
```

---

### ECMAScript 2016

- **Exponenciação (`* *`)** 🚀
```js
// 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** 🚀
```js
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** 🚀
```js
const nome = null ?? "Alexandre" // "Alexandre"
```
- **Operador optional Chaining** 🚀
```js
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()** 🚀
```js
const first = await Promise.any([prom1,prom2,prom3]); // Retorna a primeira que terminar
```
- **String replaceAll()** 🚀
- **Separação numérica (`_`)** 🚀
```js
const mil = 1_000
const milhao = 1_000_000
const bilhao = 1_000_000_000;
```

---

### ECMAScript 2022

- **Array at()** 🚀
```js
const numeros = [1, 2, 3, 4, 5]
numeros[numeros.length - 1] // 5
numeros.at(-1) // 5
```
- **String at()** 🚀
```js
const texto = "hello world"
texto[numeros.length - 1] // d
texto.at(-1) // d
```
- RegExp /d
- Object.hasOwn()
- error.cause
- **await import** 🚀
```js
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
```js
// 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 🤩🤩)🚀
```js
// 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.