New JavaScript Features ECMAScript 2021 (with examples)

ECMAScript 2021 is the version of ECMAScript corresponding to this year. There are some useful and awesome features that have been incorporated and used in our javascript projects

The new JavaScript features in ECMAScript 2021 are:

Numeric separator…

ECMAScript 2021 is the version of ECMAScript corresponding to this year. There are some useful and awesome features that have been incorporated and used in our javascript projects

The new JavaScript features in ECMAScript 2021 are:

  • Numeric separators
  • String replaceAll
  • Logical assignment operator
    • And & Equals (&&=)
    • OR & Equals (||=)
    • Nullish Coalescing & Equals (??=)
  • Promise.any
  • Private class methods
  • Private Getters and setters
  • WeakRef
  • Finalizers



Numberic separators

This new feature allows that numeric literals use underscores as separators to help to improve readability using a visual separation between groups of digits.



Example

// A billion
const amount = 1_000_000_000;

// Hundreds of millions     
const amount = 1_475_938.38;

// 6234500 cents (62345 dollars)
const amount = 62345_00;

// 1,734,500
const amount = 1_734_500; 

// 20^30000
const amount = 2e30_000;

// Also can be used for Binary, Hex, Octal bases



String.protype.replaceAll

Currently, there is no way to replace all instances of a substring without the use of global regexp (/regex/g). With the new method replaceAll that change that.



Example



Before (with regex)

const message = 'hello+this+is+a+message';
const messageWithSpace = message.replace(/\+/g, ' ');

// hello this is a message



After (with new method replaceAll)

const message = 'hello+this+is+a+message';
const messageWithSpace = message.replaceAll('+', ' ')

// hello this is a message



Logical assignment operator

Logical assignment operators combine logical operators and assignment expressions.

There are some new operators:

  • And & Equals (&&=)
  • OR & Equals (||=)
  • Nullish Coalescing & Equals (??=)



And & Equals (&&=)

Assign when the value is truthy. Also in the next table is explained.

With constants, x and y with a value of true when the constant has a value assigned and false in the opposite case.

x y x And & Equals y x after assign
true true true true
true false false false
false true false false
false false false false



Before

let a = 1;
if(a){
  a = 8;
}

// Output: a = 8



After

let a = 1;
a &&= 3

// Output: a = 3



OR & Equals (||=)

Assign when the value is falsy. Also in the next table is explained.

With constants, x and y with a value of true when the constant has a value assigned and false in the opposite case

x y x OR & Equals y x after assign
true true true true
true false true true
false true true true
false false false false



Before

// If conditional
let a = undefined;
if(!a){
  a = 5;
}

// Output: a = 5

// OR
a = a || 3;

// Output: a = 3



After

let a = 1;
a &&= 3

// Output: a = 3



Nullish Coalescing & Equals (??=)

Assign when the value is null or undefined.


let a = undefined; 
a ??= 7

// Output: a = 7



Promise.any method

The Promise.any() method returns a promise that will resolve as soon as one of the promises is resolved. If all of the promises are rejected, the method will throw an AggregateError exception holding the rejection reason



Example

const firstPromise = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 1000);
});

const secondPromise = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 2000);
});

const thirdPromise = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 3000);
});

try {
  const first = await Promise.any([
    firstPromise, secondPromise, thirdPromise
  ]);
  // Any of the promises was fulfilled.
} catch (error) {
  console.log(error);
  // AggregateError: All promises were rejected
}



Private class methods

Previously when was needed to declare a private method need to be added an underscore at the beginning of the method name (based on convention), however, that not guarantee that the method will be private. With ES2021 was added as a new feature the private class methods.



Example

class Test {

  #addTestRunner(testRunner){
    this.testRunner = testRunner
  }
}

const test = new Test();
test.addTestRunner({name: 'test'});

// Output: TypeError: test.addTestRunner is not a function



Private Getters and setters

Previously when was needed to declare a getter or setter can be accessed by means of the instance created, with ES2021 was added as a new feature the private getters and setters.



Example

class Test {

  get #name(){
    return 'test-name';
  }
}

const test = new Test();
test.name

// Output: undefined



WeakRef

The WeakRef, which stands for Weak References, allows you to create a weak reference to an object. A weak reference to an object is a reference that does not prevent the object from being reclaimed by the garbage collector.

The primary use of Weak Reference is to implement caches or mappings of large objects. Where it’s desired that a large object is not kept alive solely because it appears in a cache or mapping.



Example

const objectExample = {name: "Juanito", lastname: "Jordan"};
const refObj = new WeakRef(objectExample);

When you need to read the value of WeakRefs, need to use the deref() method to return the instance.

const objectExample = {name: "Juanito", lastname: "Jordan"};
const refObj = new WeakRef(objectExample);
const obj = refObj.deref();
obj.name

// Output: 'Juanito'



Warnings

The detail with the WeakRef feature is that the implementation detail of when, how, and whether JavaScript garbage collector occurs or not, you may observe different behavior between environments. Also, the complexity of the Javascript garbage collector is very high.

For that reason, use WeakRef is not recommended and it’s best to avoid implementing one if possible. Unless you’re a JavaScript library maintainer, you will most likely never need to use it. More information WeakRefs TC39 proposal



Finalizers

The Finalizer is a companion feature of WeakRef that allows you to execute some specific code after an object has become unreachable to the program.

In short, you can register a callback function that gets triggered after the garbage collection occurs. You can create a registry bypassing the callback to the FinalizationRegistry.



Example

const registry = new FinalizationRegistry(value => {
  // Do some stuff
});

Then, you can register any object you want to clean up for by calling the register() method, passing both the object and the value you want to pass to the callback function.

registry.register({greeting: "Hello World"}, "greetingObject");

The object passed into the register() method will be weak referenced so when the value will be garbage collected the second param will be passed to the finalizer (“greetingObject” param).



Warning

As mentioned previously the WeakRef and Finalizer are tricky and are not recommended to be used WeakRefs TC39 proposal.



Conclusion

JavaScript is an awesome programing language, and that’s something very healthy for web development. Every year there is a new awesome feature that can be used in the project. In this post, we’ve reviewed the ES2021 features. We expect surprises the next year with a new version ES2022

Let me know in your comments recommendations or something else that can be added, I will update the post based on that thanks! ?



References


Print Share Comment Cite Upload Translate
APA
Brayan Arrieta | Sciencx (2024-03-29T10:11:37+00:00) » New JavaScript Features ECMAScript 2021 (with examples). Retrieved from https://www.scien.cx/2021/04/27/new-javascript-features-ecmascript-2021-with-examples/.
MLA
" » New JavaScript Features ECMAScript 2021 (with examples)." Brayan Arrieta | Sciencx - Tuesday April 27, 2021, https://www.scien.cx/2021/04/27/new-javascript-features-ecmascript-2021-with-examples/
HARVARD
Brayan Arrieta | Sciencx Tuesday April 27, 2021 » New JavaScript Features ECMAScript 2021 (with examples)., viewed 2024-03-29T10:11:37+00:00,<https://www.scien.cx/2021/04/27/new-javascript-features-ecmascript-2021-with-examples/>
VANCOUVER
Brayan Arrieta | Sciencx - » New JavaScript Features ECMAScript 2021 (with examples). [Internet]. [Accessed 2024-03-29T10:11:37+00:00]. Available from: https://www.scien.cx/2021/04/27/new-javascript-features-ecmascript-2021-with-examples/
CHICAGO
" » New JavaScript Features ECMAScript 2021 (with examples)." Brayan Arrieta | Sciencx - Accessed 2024-03-29T10:11:37+00:00. https://www.scien.cx/2021/04/27/new-javascript-features-ecmascript-2021-with-examples/
IEEE
" » New JavaScript Features ECMAScript 2021 (with examples)." Brayan Arrieta | Sciencx [Online]. Available: https://www.scien.cx/2021/04/27/new-javascript-features-ecmascript-2021-with-examples/. [Accessed: 2024-03-29T10:11:37+00:00]
rf:citation
» New JavaScript Features ECMAScript 2021 (with examples) | Brayan Arrieta | Sciencx | https://www.scien.cx/2021/04/27/new-javascript-features-ecmascript-2021-with-examples/ | 2024-03-29T10:11:37+00:00
https://github.com/addpipe/simple-recorderjs-demo