Posted on Sep 19, 2020

As novas funcionalidades do Javascript em 2020 (ES2020)

Javascript é uma sensação, grande parte em virtude da explosão do desenvolvimento web nos dias de hoje. Muitos estão inseridos nela e outros, uma hora ou outra terão que aprende-la para integrar determinadas funcionalidades a seus projetos. Segundo o StackOverflow Survey 2020 o Javascript é a linguagem mais utilizada hoje em dia, e o numero de seus usuários só cresce.

Apesar disso, é do conhecimento de boa parte de seus usuários que o inicio do Javascript foi realmente conturbado em sua construção, gerando até varias piadas na internet sobre suas funcionalidades. Hoje tudo mudou, e varias versões do EcmaScript (European association for standardizing information and communication systems) foram surgindo para padronizar essas funcionalidades.

Em 2020, uma nova versão do EcmaScript surgiu, e com ela, varias funcionalidades foram incluídas nativamente aos browsers. Nesse artigo, vamos navegar por cada uma delas e descobrir suas utilidades. Está pronto?

BigInt

O numero de representações de inteiro foi uma das funcionalidades inseridas na nova versão do ES11. Antes, o máximo numero representativo no javascript era o número 9007199254740991.

Agora, com o bigInt, podemos ir além desse número.

Importação dinâmica

Agora, com o Javascript, podemos importar módulos dinamicamente módulos por meio de variáveis. Com isso, as variáveis que recebem os módulos conseguem englobar o namespaces desses módulos de uma forma global.

let Dmodule; if("react") { Dmodule = await import('react') }else{ Dmodule = await import('vue') } /* É possivel utilizar Dmodule.(métodos) em todo o arquivo de forma global */

Exportação de módulos

Uma nova sintaxe foi adicionada permitindo a exportação de módulos semelhante ao import que já existia, veja um exemplo abaixo:

// Já existente no JS import * as MyComponent from './Component.js' // Adicionado no ES11 export * as MyComponent from './Component.js'

Optional Chaining

O Optional Chaining, conhecido pelos usuários do babel agora é suportado nativamente pelo Javascript. Essa funcionalidade remove a necessidade de condicionais antes de chamar uma variável ou método englobado a ela.

const user = { "name": "Aryclenio Barros", "age": 22, "alive": true, "address": { "street": "Hyrule street", "number": 24, } } // Sem optional chaining const number = user.address && user.address.number // Com optional chaining const number = user.address?.number

Nullish Coalescing Operator

Um novo operador foi adicionado ao Javascript. Ele veio para causar discrepância entre o valor falsey do Javascript. Utilizamos a condição de falsey com o operador ||. Os valores falsey são:

0
undefined
null
false
NaN

O novo operador somente engloba undefined e null, permitindo com que variáveis englobem os restantes do valores como true em uma condicional. Perceba que diferente do caso acima, os valores de 0, NaN e false são persistido em virtude de um valor não falsey.

Promise.AllSettled

O atributo Promise.AllSettled permite que você realize uma condicional que observa se todas as promises em um array foram resolvidas. Veja abaixo um exemplo:

const myArrayOfPromises = [ Promise.resomve(myPromise), Promise.reject(0), Promise.resolve(anotherPromise) ] Promise.AllSettled(myArrayOfPromises).then((result) => { // Do your stuff })

matchAll

O método matchAll é uma funcionalidade que detalha de uma forma melhor comparações de regex dentro de uma string. Seu resultado é um array que indica as posições, assim como grupo de string e a origem da pesquisa. Veja um exemplo de um regex que permite valores de 0 a 5 com o método matchAll.