Unlock JavaScript 2021: 5 Game-Changing Features You Must Master

Today we discuss several useful JavaScript new features that can reduce code size and help developers achieve more.

JavaScript is an easy‑to‑learn programming language, ideal for beginners, and has become ubiquitous across front‑end frameworks (React, Angular, Vue.js), back‑end (Node.js), and desktop apps with Electron.

In 2021, JavaScript introduced new capabilities that further aid developers. Below is a summary of the most notable additions.

1) New Logical Assignment Operators

JavaScript added three logical assignment operators: &&=, ||=, and ??=. They combine logical checks with assignment.

a) &&= operator

let a = 1;
let b = 2;
a &&= b;
console.log(a); // 2

The above is equivalent to:

if (a) {
  a = b;
}

It assigns b to a only when a is truthy.

b) ||= operator

let a = 1;
let b = 2;
a ||= b;
console.log(a); // 1

This assigns b to a only when a is falsy, equivalent to:

if (!a) {
  a = b;
}

c) ??= operator

let a;
let b = 2;
a ??= 1;
console.log(a); // 1

The operator assigns the right‑hand value only when the left‑hand variable is null or undefined.

2) String replaceAll Method

The traditional replace method replaces only the first match. replaceAll replaces every occurrence without needing a regular expression.

let str = 'JS is everywhere. JS is amazing!';
console.log(str.replaceAll('JS', 'JavaScript'));
// Output: 'JavaScript is everywhere. JavaScript is amazing!'

3) Numeric Separators Using Underscores

Underscores can be placed within numeric literals to improve readability without changing the value.

let number = 1_000_000_000; // one billion
console.log(number); // 1000000000

4) Promise.any()

Promise.any()

takes an iterable of promises and resolves with the first fulfilled promise. If all promises reject, it throws an AggregateError.

const p1 = new Promise(r => setTimeout(r, 500, 'First'));
const p2 = new Promise(r => setTimeout(r, 800, 'Second'));
const p3 = Promise.reject(1);
Promise.any([p1, p2, p3])
  .then(result => console.log(result)) // 'First'
  .catch(e => console.log(e));

5) WeakRef and Finalizers

WeakRef

creates a weak reference to an object, allowing it to be garbage‑collected if no strong references exist.

const weakRefFunc = () => {
  const obj = new WeakRef({ name: 'JavaScript' });
  console.log(obj.deref().name);
};
weakRefFunc(); // may print 'JavaScript' or undefined depending on GC

Finalizers, used with FinalizationRegistry, let you run cleanup code when an object is collected.

const registry = new FinalizationRegistry(msg => console.log(msg));
const obj = { name: 'JavaScript' };
registry.register(obj, 'obj is collected now!');
// When obj is garbage‑collected, the message is logged.

Conclusion

Overall, JavaScript remains an exciting language, and the 2021 features—logical assignment operators, replaceAll, numeric separators, Promise.any, and WeakRef/Finalizers—provide powerful tools for developers. Give them a try in your next project.