Original link:

Medium.com/better-prog…

Here’s an overview of ECMAScript 2015-2021 features:

  • ES2015

  • ES2016

  • ES2017

  • ES2018

  • ES2019

  • ES2020

  • ES2021

Introduction to the

ES2021 is the 2021 version of ECMAScript. ES2021 doesn’t offer as many new features as ES2015, but it does incorporate some useful features.

This article introduces the new ES2021 features with easy-to-understand code examples. Before you do that, of course, you need to know the basics of JavaScript.

Here’s an overview of the new ES2021 features:

  • String.prototype.replaceAll
  • Promise.any
  • WeakRef
  • Logical assignment operator
  • Numeric separator

String.protype.replaceAll

Prior to ES2021, to replace all specified characters in a string, we could do this:

const fruits = '🍎 + 🍓 🍐 + +';
const fruitsWithBanana = fruits.replace(/\+/g.'🍌');
console.log(fruitsWithBanana); / / 🍎 🍌 🍐 🍌 🍓 🍌
Copy the code

ES2021 proposes the replaceAll method and mounts it on the String prototype, which can be used as follows:

const fruits = '🍎 + 🍓 🍐 + +';
const fruitsWithBanana = fruits.replaceAll('+'.'🍌');
console.log(fruitsWithBanana); / / 🍎 🍌 🍐 🍌 🍓 🍌
Copy the code

Promise.any

The promise.any method is similar to promise.race — whenever a Promise in a given iteration succeeds, the value of the first Promise is taken as its return value, Unlike promise.race, however, it will wait until all promises have failed before returning the failed value:

const myFetch = url= > setTimeout(() = > fetch(url), Math.floor(Math.random() * 3000));
const promises = [
  myFetch('/endpoint-1'),
  myFetch('/endpoint-2'),
  myFetch('/endpoint-3')];// Use.then.catch
Promise.any(promises) // Any promise will succeed.
       .then(console.log) / / such as' 3 '
       .catch(console.error); // All the promises failed
/ / use the async - await
try {
  const first = await Promise.any(promises); // Any promise returns successfully.
 console.log(first);
}catch (error) { // All the promises failed
  console.log(error);
}
Copy the code

WeakRef

WeakRef proposal mainly contains two new functions:

  • Can be achieved byWeakRefClass to create a weak reference to an object
  • Can be achieved byFinalizationRegistryClass to perform custom methods after an object has been garbage collected

These two new features can be used together or separately, depending on your needs.

A WeakRef object contains a weak reference to an object, called a target or reference. By weakly referencing an object, it is possible for the object to be collected by the garbage collection mechanism without other references.

WeakRef is mainly used to cache and map large objects, so you can use it when you want an object to be garbage collected without being referenced elsewhere.

function toogle(element) {
  const weakElement = new WeakRef(element);
  let intervalId = null;

  function toggle() {
    const el = weakElement.deref();
    if(! el) {return clearInterval(intervalId);
   }
   const decoration = weakElement.style.textDecoration;
   const style= decoration === 'none' ? 'underline' : 'none';
   decoration = style;
  }
  intervalId = setInterval(toggle, 1000);
}
const element = document.getElementById("link");
toogle(element);
setTimeout(() = > element.remove(), 10000);
Copy the code

FinalizationRegistry receives a registry callback function that can be used to register an event listener for the specified object, which triggers the listening event when the object is garbage collected as follows.

First, create a registry:

const registry = new FinalizationRegistry(heldValue= > {
  / /...
});
Copy the code

We can then register a specified object and also pass some parameters to the registrar callback:

registry.register(theObject, "some value");
Copy the code

Logical assignment operator

The difference between an assignment operator and an expression can be seen here.

The logical assignment operator combines a logical operator with an assignment expression. There are two types of logical assignment operators:

  • Or equal to the (| | =)
  • And is equal to (&&=)
/ / or equal to zero| a | b | a | | = b | a) after (operations | |true  | true  |   true  |        true         |
| true  | false |   true  |        true         |
| false | true  |   true  |        true         |
| false | false |   false |        false        |
a ||= b
// Equivalent to:
a || (a = b);

/ / and equal to zero| a | b | a && = b | a) after (operations | |true  | true  |   true  |        true         |
| true  | false |   false |        false        |
| false | true  |   false |        false        |
| false | false |   false |        false        |
a &&= b
// Equivalent to:
a && (a = b);
Copy the code

Numeric separator

With this feature, we use the “(_, U+005F)” delimiter to group numbers to improve readability:

1 _000_000_000           / / one billion
101 _475_938. 38          / / one hundred million

const amount = 12345 _00;  // 12,345
const amount = 123 _4500;  // 123.45 (reserve 4 decimal places)
const amount = 1 _234_500; / / 1234500

0.000 _001 // One in a million
1e10_000  / / 10 ^ 10000

const binary_literals = 0b1010_0001_1000_0101;
const hex_literals = 0xA0_B0_C0;
const bigInt_literals = 1_000_000_000_000n;
const octal_literal = 0o1234_5670;
Copy the code

conclusion

JavaScript is a dynamically typed language, which is beneficial for Web development in some ways. JavaScript has been evolving rapidly since ES2015. In this article, we highlight some of the new ES2021 features.

While your project may not use these new features, they do open up a lot of possibilities for project development, right?