Explore 5 Powerful ES2021 JavaScript Features You Should Start Using

ES2021 (ES12) introduces five new JavaScript features, which this article briefly explains.

String.prototype.replaceAll()

Traditionally

String.prototype.replace()

replaces only the first occurrence when given a string. To replace all occurrences you need a regular expression with the global flag. ES2021 adds

String.prototype.replaceAll()

that performs a global replacement without a regex.

'koofe'.replace('o', 'ô'); // kôofe
'koofe'.replace(/o/g, 'ô'); // kôôfe
'koofe'.replaceAll('o', 'ô'); // kôôfe

Promise.any

The Promise object now supports several methods:

Promise.allSettled : returns a resolved promise with the status of each input promise, regardless of fulfillment or rejection.

Promise.allSettled([Promise.reject(1), Promise.resolve(2)])
  .then(result => console.log('result:', result))
  .catch(error => console.error('error:', error));
// result: [{status:"rejected",reason:1},{status:"fulfilled",value:2}]

Promise.all : rejects immediately if any promise rejects; resolves only if all fulfill.

Promise.all([Promise.reject(1), Promise.resolve(2)])
  .then(result => console.log('result:', result))
  .catch(error => console.error('error:', error));
// error: 1

Promise.race : settles as soon as any promise settles.

Promise.race([Promise.reject(1), Promise.resolve(2)])
  .then(result => console.log('result:', result))
  .catch(error => console.error('error:', error));
// error: 1

Promise.any : resolves as soon as any promise fulfills; rejects only if all reject.

Promise.any([Promise.reject(1), Promise.resolve(2)])
  .then(result => console.log('result:', result))
  .catch(error => console.error('error:', error));
// result: 2

Note that

Promise.all

and

Promise.race

are ES2015 features, while

Promise.allSettled

and

Promise.any

were added in ES2020 and ES2021 respectively.

Logical Assignment Operators

Logical assignment combines a logical operator with assignment:

or equals (

||=

)

and equals (

&&=

)

nullish coalescing equals (

??=

)

Example:

let obj = {};
obj.x ??= 0;   // 0
obj.x ||= 1;   // 1
obj.x &&= 2;   // 2

These operators only assign when the left‑hand side satisfies the logical condition; they differ from writing the equivalent expression with a plain assignment.

Numeric Separators

The underscore (

_

) can be used to separate digits for readability.

const count1 = 1000000000;
const count2 = 1_000_000_000;
console.log(count1 === count2); // true

WeakRefs

WeakRef

creates a weak reference to an object, allowing the garbage collector to reclaim the object if no strong references exist.

const ref = new WeakRef({ name: 'koofe' });
let obj = ref.deref();
if (obj) {
  console.log(obj.name); // koofe
}

Use WeakRef cautiously; avoid it when possible.

Conclusion

ES2021 is in Stage 4 and is expected to be officially released mid‑year. All the features described are already supported in the latest Chrome version, so you can try them out today.