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.

Conclusão

Além dessas funcionalidades, algumas outras foram englobadas, você pode ver o conjunto completo de mudanças no site oficial da Ecma.

Espero que vocês tenham gostado e muito obrigado pela leitura. Convido vocês a lerem meus outros artigos e me seguirem aqui no dev.to.

Best regards!! :)