Principais recursos do JavaScript ES12 que você deve saber

Em 2015, o revolucionário ES6 foi introduzido com uma variedade de recursos que são comumente usados ​​no desenvolvimento web moderno. Desde então, o ECMAScript evoluiu significativamente até o ES12, oficialmente conhecido como ECMAScript 2021.

O ES12 chegou em junho de 2021 com novos recursos, melhorias e algumas alterações de sintaxe. Todo desenvolvedor JavaScript ansioso para ter o melhor desempenho deve aprender os recursos mais recentes do ES12. Neste post, veremos os seis principais recursos com exemplos.

Precisando hospedar seu projeto em uma empresa que oferece suporte avançado e um valor justo? Veja as opçõas da SOLOWEB acesse https://soloweb.com.br

1. Promise.any()

Promise.any() pega um iterável de objetos Promise e resolve se alguma dessas promessas for resolvida. Isso é útil quando precisamos apenas de uma promessa para cumprir, independentemente do que aconteça com os outros. Promise.all() era um método semelhante que já existia no ES, mas era resolvido apenas se todas as promessas fossem resolvidas. Da mesma forma, Promise.race() foi usado para retornar a primeira promessa para concluir se foi resolvida ou rejeitada.

const err = new Promise((resolve, reject) => {
  reject(new Error('Erro'));
});
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('Primeira Promise');
  }, 200);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('Segunda Promise');
  }, 500);
});
Promise.any(\\\[err, p1, p2\\\]).then((res) => {
  console.log(res);
})

// output: Primeira Promise

A nova classe AggregateError nos ajuda a detectar exceções do método Promise.any(). Por exemplo, se todas as promessas passadas para Promise.any() forem rejeitadas, ele lançará um objeto AggregateError.

const e1 = new Promise((resolve, reject) => {
  reject(new Error('Erro 1'));
});
const e2 = new Promise((resolve, reject) => {
  reject(new Error('Erro 2'));
});
Promise.any(\\\[e1, e2\\\])
.then((res) => {
  console.log(res);
})
.catch((err) => {
  console.log(err);
});
// output: "AggregateError: All promises were rejected"

O uso de Promise.any() no desenvolvimento é bem direto. Por exemplo, podemos enviar várias chamadas de API idênticas para um servidor ou banco de dados e retornar os dados, independentemente do que ocorrer primeiro.

2. WeakRef

Como o nome sugere, WeakRef é uma referência fraca para outro objeto. Um objeto fracamente referenciado não será mantido na memória enquanto não for fortemente referenciado.

JavaScript usa seu algoritmo de coleta de lixo para eliminar objetos na memória que não são mais referenciados por outros objetos. Portanto, quando criamos um objeto WeakRef, ele pode ser coletado como lixo a qualquer momento.

const student = {
    name: 'João da Silva',
    age: 20,
    address: {
      number: 365,
      street: 'Ruas das Flores'
    }
  }
const ref = new WeakRef(student);
ref.deref().age;

//output: 20

Podemos usar o método deref() para acessar a referência fraca se ela ainda estiver disponível na memória.

Embora o WeakRef seja útil para economizar memória, os autores do WeakRef aconselham evitá-lo sempre que possível, devido ao comportamento complicado dos coletores de lixo em diferentes mecanismos JavaScript.

3. Private class methods

Desde a introdução de classes para JavaScript no ES6, métodos e propriedades são públicos por padrão. Embora os desenvolvedores tenham usado o prefixo de sublinhado ( _ ) ao declarar métodos e propriedades privadas, era apenas uma convenção. Isso não impediu ninguém de acessar propriedades privadas de fora da classe.

Mas com o ES12, o JavaScript permitiu a criação de métodos e propriedades privadas de forma nativa. Para criar um, temos que prefixar o identificador com um hash ( # ).

class Auth {
  #getToken() {
   return "12345678";
  }
  isAuth() {
   return this.#getToken();
  }
}

const auth = new Auth();

auth.getToken(); //output: auth.getToken is not a function

auth.isAuth(); //output: 12345678

Semelhante aos métodos e propriedades privados, podemos definir acessadores privados (getters e setters) usando a mesma sintaxe.

class Auth {
   get #getToken() {
    return localStorage.getItem('token');
   }
   set #setToken(token) {
    localStorage.setItem('token', token);
   }
   set login(token) {
    this.#setToken = token;
   }
   get isAuth() {
    return this.#getToken;
   }
}

let token = '12345678';

const auth = new Auth();

auth.login = token;

auth.isAuth; //output: 12345678

4. Atribuição lógica OR (Logical assignment operators)

JavaScript já suporta operadores de atribuição aritmética e bit a bit. A partir do ES12, ele ampliou o suporte a operadores de atribuição lógica.

Existem três novos operadores de atribuição lógica:

Atribuição de nulidade lógica ( ??= ) Ou Logical Nullish Assignment

Atribuição E Lógica ( &&= ) Ou Logical AND Assignment 

Atribuição lógica OR ( ||= ) Ou Logical OR Assignment

Embora a sintaxe seja semelhante a um operador de atribuição aritmética (+=), os operadores de atribuição lógica nem sempre realizarão a atribuição. Em vez disso, a atribuição ocorrerá somente se a condição definida pelo operador lógico for atendida.

4.1 Atribuição de nulidade lógica

O operador de atribuição lógico nulo (??=) atribuirá o valor do operando direito ao operando esquerdo somente se o operando esquerdo for nulo ou indefinido (nulo).

A primeira vista, o operador ??= pode parecer um pouco confuso porque a forma expandida desse operador é equivalente a x ?? (x = y).

const person = { name: 'João' };

person.name ??= 'Usuario 1';

console.log(person.name);
// output: João

person.age ??= 18;

console.log(person.age);
// output: 18

Se usarmos uma versão mais antiga do ES, o código acima ficará assim:

const person = { name: 'João' };
if(person.name === undefined || person.name === null) {
    person.name = 'Usuario 1';
}

console.log(person.name);

if(person.age === undefined || person.age === null) {
    person.age = 18;
}

console.log(person.age);

4.2 Atribuição E Lógica

O operador de atribuição lógico AND (&&=) realizará a atribuição se o operando esquerdo for verdadeiro. Como acabamos de abordar a atribuição nula, o uso do operador de atribuição lógico AND é bastante autoexplicativo.

const product = { stocks: 10 };
product.stocks &&= 20;
console.log(product.stocks);

// output: 20

product.exp &&= '25/12/2021';
console.log(product.exp);

// output: undefined

4.3 Atribuição lógica OR

O operador de atribuição lógica OR (||=) é semelhante à atribuição nula, mas o operando esquerdo deve ser falso para que a atribuição ocorra. Um valor é considerado falso se for nulo, indefinido, falso, 0 ou NaN.

const product = {
  stocks: 0,
  exp: '31/12/2021'
};

product.stocks ||= 10;

console.log(product.stocks);
// output: 10

product.exp ||= '31/01/2022';

console.log(product.exp);
// output: 12/31/2021

5. String.replaceAll()

A finalidade do método replaceAll() é substituir todas as substrings dentro de uma string. Nas versões anteriores do ES, se quiséssemos fazer isso, tínhamos que usar o método replace().

No método replace(), apenas a primeira ocorrência seria substituída se você usasse uma string como o primeiro argumento. Portanto, definiríamos o primeiro argumento como uma expressão regular para substituir todas as ocorrências.

let str = 'hotdog dog'.replace(new RegExp('dog','g'), 'cat');

console.log(str) //output: hotcat cat

Com o ES12, podemos usar o método replaceAll() imediatamente sem usar expressões regulares. Este método é super simples e seguro.

let str = 'hotdog dog'.replaceAll('dog', 'cat');

console.log(str) //output: hotcat cat

6. Separadores numéricos (Numeric separators

Este é um recurso simples e útil que já estava disponível nos navegadores graças ao motor V8, mas agora vem integrado ao ES12. Separadores numéricos são sublinhados (_) que nos ajudam a separar números grandes.

let billion = 1_000_000_000;

console.log(billion); //output: 1000000000

O navegador ignorará os sublinhados. Separadores numéricos facilitam a vida dos desenvolvedores ao trabalhar com grandes números.

Observação: os números não podem começar ou terminar com um separador numérico e você não pode usar dois ou mais sublinhados juntos.

Conclusão

O ECMAScript continua evoluindo com a introdução de novos recursos interessantes a cada ano.

Neste post, exploramos os seis principais recursos do ES12 que você deve aprender como desenvolvedor JavaScript. Espero que você aproveite esses recursos para seus projetos de desenvolvimento.

E lembrando se está precisando hospedar seu projeto em uma empresa que oferece suporte avançado e um valor justo? Veja as opçõas da SOLOWEB acesse https://soloweb.com.br