Três novidades no ES2018 que você precisa conhecer

O JavaScript não para de evoluir. Desde a primeira grande atualização na linguagem, em 2015 com o ES6 (depois rebatizado para ES2015), temos lançamentos anuais com correções, melhorias e novas funcionalidades.

O processo de atualização é coordenado pelo TC39, um comitê que conta com membros da comunidade e representantes de grandes empresas.

Um fato muito legal sobre o TC39: temos um brasileiro que é membro ativo do comitê, o Leo Balter.

Temos aqui no portal uma entrevista que fizemos com o Leo em 2016, na qual ele conta um pouco como o comitê funciona.

O ES2018 nos traz algumas novidades e melhorias bem interessantes.

Em junho de 2018 já devemos ter a versão oficializada pela ECMA International.

Agora, vamos conhecer três das funcionalidades oferecidas 👌

Asynchronous Iteration

O ES2015 trouxe muitas novidades. Uma delas foi o iterator (iterador), um objeto que oferece a funcionalidade de navegar entre os itens de uma lista ou estrutura – um a um – em sequência. Este objeto oferece o método next, o qual retornará o próximo item da lista no seguinte formato:

{   value: Mixed,   done: Boolean } 

Você pode saber mais sobre Iterators no post Generators, yield e iterators, aqui no portal.

Iterators são muito legais e nos dão N possibilidades, porém, Iterators somente funcionam em dados síncronos.

Veja um exemplo:

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let it = arr[Symbol.iterator](); console.log(it.next().value); // 1 console.log(it.next().value); // 2 console.log(it.next().value); // 3 console.log(it.next().value); // 4 

A novidade no ES2018 é a sua possibilidade assíncrona.

Um iterator assíncrono, basicamente, é um iterator. Entretanto, o método next retorna uma Promise.

const { value, done } = syncIterator.next(); asyncIterator.next().then(({ value, done }) => /* ... */); 

Para fazer a iteração, agora temos o for await of, que faz exatamente o que parece, itera objetos iteráveis assincronamente. Legal, né? 🔥

for await (const line of readLines(filePath)) {   console.log(line); } 

Veja mais na documentação da proposta.

Object Rest/Spread Properties

rest e spread também entraram no ES2015.

A sintaxe chamada de "destructuring assignment" é uma expressão JavaScript que torna possível descompactar valores de arrays ou propriedades de objetos e atribuir a variáveis novas.

Vejamos um exemplo:

var a, b, rest; [a, b] = [10, 20];  console.log(a); // expected output: 10  console.log(b); // expected output: 20  [a, b, ...rest] = [10, 20, 30, 40, 50];  console.log(rest); // expected output: [30,40,50] 

Veja mais sobre destructuring na MDN.

Basicamente, o ES2018 introduz a mesma possibilidade para objetos.

Rest:

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

Spread:

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

Veja mais na documentação da proposta oficial.

Promise.prototype.finally()

Promises já estão no nosso dia a dia há um bom tempo.

Desenvolvedores JavaScript já vinham utilizando Promises antes mesmo de se tornar parte da linguagem (usando bibliotecas), também no ES2015.

A novidade do ES2018 é que agora Promises terão o finally.

Muitas bibliotecas existentes implementam o método finally, que é um callback para quando uma Promise está pronta, seja como fulfilled ou rejected.

Podemos pensar no finally como o já conhecido try/catch/finally, no qual o finally será sempre executado.

promise .then(result => {···}) .catch(error => {···}) .finally(() => {···}); 

Veja mais na proposta oficial.

Conclusão

O ES2018 ainda traz outras novidades e melhorias, como novas funcionalidades para expressões regulares (RegExp) e uma revisão nos template literals.

O Dr. Axel Rauschmayer faz um excelente trabalho em seu blog 2ality, e lá ele escreveu sobre todas as novidades no post ECMAScript 2018: the final feature set.