Skip to main content

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 nextretorna 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 finallyserá 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.

Comments

Popular posts from this blog

Criando um filtro de busca customizável com JavaScript funcional

Tutoriais utilizando bibliotecas e frameworks para state management se tornaram comuns. Apesar disso, já que muita gente usa muitos frameworks diferentes, muitas vezes precisamos falar sobre a plataforma que permite isso tudo: a odiadíssima ferramenta que é o JavaScript, na sua forma mais pura — conforme descrito com documentações excelentes como a da MDN . Esse tutorial também pode ser útil para quem está iniciando em JavaScript e desenvolvimento em geral já começar com alguma ideia do que é programação funcional. O termo está se tornando popular e quem não subir nesse barco pode ficar para trás em pouco tempo. Não vamos adentrar nos detalhes do que é programação funcional neste artigo — isso é assunto para outras horas de conversa. Aqui, ficaremos no rápido e simples: alcançar nosso objetivo, evitando mutações dos dados e estado global. Iniciando o projeto Pelo bem da simplicidade, vamos manter tudo num único arquivo, que vai ter essa cara: <!DOCTYPE HTML> ...

Vue.js, React.js ou angular. O que escolher?

As estruturas JavaScript estão se desenvolvendo em um ritmo extremamente rápido, o que significa que hoje temos versões atualizadas frequentemente do Angular, ReactJS e de outro player neste mercado - Vue.js. Analisando o número de posições abertas em todo o mundo que exigem um conhecimento específico de um determinado framework. Como fonte, Indeed.com  chegando a seguinte distribuição de acordo com mais de 60.000 ofertas de emprego. Levando em conta os dados a seguir, será apresentado as principais vantagens e desvantagens de cada framework frontend para ajudar os profissionais de tecnologia ou engenheiros a escolher o melhor para suas necessidades de desenvolvimento. Prós e contras do angular Angular é uma estrutura de MVVM super-heróica de JavaScript, fundada em 2009, que é incrível para a criação de aplicativos da Web altamente interativos. Benefícios do Angular  Novos recursos como RXJS aprimorado, compilação mais rápida (em menos de 3 segundos),...

Como filtrar consultas no firebase

Para filtrar dados, combine um dos métodos de limite ou de intervalo com um método de ordenação ao criar uma consulta. Método Uso limitToFirst() Definir o número máximo de itens para retornar a partir do início da lista ordenada de resultados. limitToLast() Definir o número máximo de itens para retornar a partir do fim da lista ordenada de resultados. startAt() Retornar itens maiores ou iguais à chave ou ao valor especificado, dependendo do método de ordenação escolhido. endAt() Retornar itens menores ou iguais à chave ou ao valor especificado, dependendo do método de ordenação escolhido. equalTo() Retornar itens iguais à chave ou ao valor especificado, dependendo do método de ordenação escolhido. Ao contrário dos métodos de ordenação, você pode combinar várias funções de limite ou   de   intervalo. Por exemplo, combine os métodos startAt() e endAt() para limitar os resultados a um intervalo especificado de valores. Mesmo quando há apenas uma correspond...