As novas funcionalidades do Javascript em 2020 (ES2020)
Tags: javascript, typescript, react, node
Published: 2020-09-19 16:09:44

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](https://insights.stackoverflow.com/survey/2020#most-popular-technologies) o Javascript é a linguagem mais utilizada hoje em dia, e o numero de seus usuários só cresce.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fdp0zfk1sphdsyukykgl.png)

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**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9gxose0gdp16tanaquof.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5i36resdp6etnhh7r9vu.png)

## 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.

```js
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:

```js
// 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.

```js
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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n98aneimzwpw21017p5b.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lcafhwgtmuktx508g583.png)

## 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:

```js
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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n2u38pvdkxtydvs9ymt8.png)

## Conclusão

Além dessas funcionalidades, algumas outras foram englobadas, você pode ver o conjunto completo de mudanças no [site oficial da Ecma](https://www.ecma-international.org/ecma-262/).

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!! :)**