DEV Community: Alexandre Akira

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

Alexandre Akira — Sat, 18 Nov 2023 16:10:01 +0000

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.

ES6, ES7, ES8... Wait, What Feature Is That?

Alexandre Akira — Sat, 18 Nov 2023 00:00:00 +0000

A Little History About Javascript

If you've been in the JavaScript world, you've probably heard about ECMAScript.

What is it?

ECMAScript is a standardized specification for scripting languages defined by ECMA-262, inspired by JavaScript.

ECMAScript is actually JavaScript itself (shocking!), but we continue calling it JavaScript by convenience and habit. Therefore, ECMAScript is the official name of the language.

WE USE ECMASCRIPT, NOT JAVASCRIPT.

What Are ES7, ES8, ECMAScript 2018...

Like every programming language, it has versions and gets updated over time. Our beloved ECMAScript does too.

ECMAScript versions were abbreviated as ES1, ES2, ES3, ES5, and ES6.

Since 2016 officially, versions are named by year (ECMAScript 2016, 2017, 2018, 2019, 2020, ...), but you might find documentation still calling them ES7, ES8, etc.

Why Do I Need to Care About Versions?

Since ECMAScript is predominantly executed in browsers, browser evolution doesn't always keep pace with language development.

This is why we have tools like Babel , Webpack , Turbopack , Rollup , and even TypeScript , which allow us to write modern code without worrying about browser compatibility.

Remember that these tools do much more than just transform modern code into older code.

Features of Each ECMAScript Version

I'll list ALL (at least as far as I could find) features implemented in each released version.

Since there are many features, I won't go deep into all of them and I'll place a 🚀 for those I like and/or find more useful.

My goal here isn't to explain how each feature works but rather to show what was added in each version.

ES1 (ECMAScript 1997)

Also known as ECMAScript 1997.

The first version of ECMAScript was released in 1997. It was created based on JavaScript and included features like variables, functions, and basic control flow statements.

ES2 (ECMAScript 1998)

Also known as ECMAScript 1998.

The second version was released in 1998. It contains only minor changes compared to the first version.

ES3 (ECMAScript 1999)

Also known as ECMAScript 1999.

Regular Expressions 🚀
Added try/catch 🚀
Added switch 🚀
Added do-while

Basic features found in almost every language.

ES4 (Never Released)

The fourth version was in development but was ultimately abandoned due to disagreements about the language's direction. 🤷‍♂️

ES5 (ECMAScript 2009)

After a long period without updates, we finally get an update with many new things.

Also known as ECMAScript 2009.

"use strict"
String[number] 🚀

const text = "Hello world"
text[0] // "H"

Multiline strings
String.trim() 🚀

const text = " Hello world "
text.trim() // "Hello world"

Array

Array.isArray() 🚀

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const text = "Hello world"

Array.isArray(fruits) // true
Array.isArray(text) // false

Array forEach 🚀

function show(value) {
  return console.log(value)
}

const numbers = [45, 4, 9, 16, 25];
numbers.forEach(show);

Array map() 🚀

function add5(value) {
  return value + 5
}

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(add5); // [50, 9, 14, 21, 30]

Array filter() 🚀

function isAdult(value) {
  return value > 18;
}

const ages = [45, 4, 9, 16, 25];
const adults = ages.filter(isAdult); // [45, 25]

Array reduce() 🚀

function add(accumulator, current) {
  return accumulator + current;
}

const numbers = [45, 4, 10, 16, 25];
const sum = numbers.reduce(add, 0); // 100

Array reduceRight
Array.every() 🚀

function isAdult(value) {
  return value > 18;
}

const ages = [45, 4, 9, 16, 25];
const allAdults = ages.every(isAdult); // false

Array.some() 🚀

function isAdult(value) {
  return value > 18;
}

const ages = [45, 4, 9, 16, 25];
const someAdults = ages.some(isAdult); // true

Array.indexOf() 🚀

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.indexOf("Orange"); // 1

Array.lastIndexOf()

JSON

JSON.parse() 🚀

const user = '{"name":"Alexandre", "age":24}'
JSON.parse(user)
/* ^? {
  name: "Alexandre",
  age: 24
}
*/

JSON.stringify() 🚀

const user = {
  name: "Alexandre",
  age: 24
}
JSON.stringify(user) // '{"name":"Alexandre", "age":24}'

Others

Date.now() 🚀

// timestamp
Date.now() // 1700318490184

Date toISOString()
Date toJSON()
Getter and Setter properties
Allows reserved words as property names
Object methods
Object defineProperty()
Function bind()
Allows trailing commas in Arrays and Objects 🚀

// Before:
const oldUser = {
  name: "Alexandre",
  age: 24
}

// New:
const user = {
  name: "Alexandre",
  age: 24, // ← This trailing comma is now allowed
}

ES6 (ECMAScript 2015)

Also known as ECMAScript 2015.

let and const 🚀
Arrow functions (The greatest of all) 🚀

const numbers = [1, 2, 3, 4, 5]
const squared = numbers.map((number) => number * number) // [1, 4, 9, 16, 25]

Spread Operator (...) 🚀

const numbers = [23, 55, 21, 87, 56];
const maxValue = Math.max(...numbers); // 87

for/of loop 🚀

const cars = ["BMW", "Volvo", "Mini"];

for (let x of cars) {
}

Map 🚀
Set 🚀

const numbers = [1, 2, 3, 1, 4, 3]

const removeDuplicates = new Set(numbers) // Set {1, 2, 3, 4}

Classes 🚀
Promises (JavaScript backend is born) 🚀

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

promise.then(v => console.log(v)) // Shows after 3 seconds

Symbol
Default Parameters 🚀

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

Rest Parameters in Functions 🚀

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

New 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

New Number Properties
New Number Methods
isFinite()
isNaN() 🚀
Object entries 🚀
Modules (import, export) 🚀
Template String 🚀

const name = "alexandre"
console.log(`my name is ${name}`)

ECMAScript 2016

Exponentiation ()** 🚀

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

Exponentiation Assignment (**=)
Array includes() 🚀

ECMAScript 2017

String padding
Object entries() 🚀
Object values() 🚀
async and await (never more 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 }

New RegExp features

ECMAScript 2019

String.trimStart()
String.trimEnd()
Object.fromEntries()
Optional Catch parameter
Array.flat()
Array.flatMap()
Array.Sort() revised
JSON.stringify() revised
Function.toString() revised
Allows symbols in strings

ECMAScript 2020

BigInt
String MatchAll()
Nullish Coalescing Operator 🚀

const name = null ?? "Alexandre" // "Alexandre"

Optional Chaining Operator 🚀

const user = {
  name: "Alexandre",
  address: {
    street: "Street A"
  }
}

user.address?.street // "Street A"
user.phone?.number // undefined (no error)

Promise.allSettled()
Dynamic import()
globalThis

ECMAScript 2021

String.replaceAll()
Promise.any()
WeakRef and 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 and private methods 🚀
Static class methods and fields
Array.at() 🚀

const array = [1, 2, 3, 4, 5];
array.at(-1); // 5 (last element)
array.at(-2); // 4 (second to last)

String.at()
Object.hasOwn()
Error cause

try {
  // some code
} catch (error) {
  throw new Error("Operation failed", { cause: error });
}

RegExp match indices

ECMAScript 2023

Array findLast() and 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() and isWellFormed()
Symbol as WeakMap keys
Change Array by copy methods

DEV Community: Alexandre Akira

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

Um pouco de história sobre o Javascript

Table of contents

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

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

Funcionalidade de cada versão do ECMAScript

ES1 (ECMAScript 1997)

ES2 (ECMAScript 1998)

ES3 (ECMAScript 1999)

ES4 (nunca foi lançado)

ES5 (ECMAScript 2009)

ES6 (ECMAScript 2015)

ECMAScript 2016

ECMAScript 2017

ECMAScript 2018

ECMAScript 2019

ECMAScript 2020

ECMAScript 2021

ECMAScript 2022

ECMAScript 2023

ECMAScript 2024 o que esperar?

Conclusão

ES6, ES7, ES8... Wait, What Feature Is That?

A Little History About Javascript

What Are ES7, ES8, ECMAScript 2018...

Why Do I Need to Care About Versions?

Features of Each ECMAScript Version

ES1 (ECMAScript 1997)

ES2 (ECMAScript 1998)

ES3 (ECMAScript 1999)

ES4 (Never Released)

ES5 (ECMAScript 2009)

Array

JSON

Others

ES6 (ECMAScript 2015)

ECMAScript 2016

ECMAScript 2017

ECMAScript 2018

ECMAScript 2019

ECMAScript 2020

ECMAScript 2021

ECMAScript 2022

ECMAScript 2023