What’s new in ECMAScript 2021

3 min readFeb 2, 2021

String.prototype.replaceAll
Promise.any
WeakRefs
Logical Assignment Operators
Numeric separators

String.prototype.replaceAll by Peter Marshall, Jakob Gruber and Mathias Bynens #

To replace all string occurrences, we need to use a combination of String.prototype.replace and global regexp. The String.prototype.replaceAll by Peter Marshall, Jakob Gruber and Mathias Bynens simplify this. The popularity of “How to replace all occurrences of a string in Javascript?” thread on StackOverflow proves this feature’s need in the language.

const string = "it-is-just-a-test";// instead of doing this
string.replace(/-/g, "_")
// "it_is_just_a_test"// in ES2021 we can do
string.replaceAll("-", "_")
// "it_is_just_a_test"

Promise.any by Mathias Bynens, Kevin Gibbons and Sergey Rubanov #

The Promise.any joins the list of Promise combinators in this year’s specification. Use Promise.any when you want to handle the first promise that fulfils.

const API = "https://api.github.com/users"Promise.any([
  fetch(`${API}/pawelgrzybek`),
  fetch(`${API}/gabriel403`)
])
  .then(response => response.json())
  .then(({name}) => console.log(`Cool dude is: ${name}`))
  .catch(error => console.error(error));

WeakRefs by Dean Tribble and Sathya Gunasekaran #

WeakRefs proposal by Dean Tribble and Sathya Gunasekaran brought to the language two new contructors — WeakRef and FinalizationRegistry. These new features are much more complicated, lower-level language concepts.

WeakRef #

When we assign an object to a variable, it points to the piece of memory where the value of this object is stored (strong reference). In case the program no longer references this object, garbage collector destroys it and reclaims the memory. An instance of WeakRef creates a reference to a given object that returns it if it is still in the memory or undefined in case the target object has been garbage collected.

const obj = { spec: "ES2021" };
const objWeakRef = new WeakRef(obj);// do something coolobjWeakRef.deref();
// returns obj in case it is still in memory
// returns undefined in case it has been garbage collected

FinalizationRegistry #

An instance of FinalizationRegistry triggers a callback function after a registered target object has been garbage collected.

const obj = { spec: "ES2021" };
const registry = new FinalizationRegistry(value => {
    console.log(`The ${value} object has been garbage collected.`)
});
registry.register(obj, "ECMAScript 2021");// perform some action that triggers garbage collector on obj
// The ECMAScript 2021 object has been garbage collected.

Be careful though — we should avoid using them as per proposal’s author recommendation. Both of these features rely on garbage collector implementation that varies based on engine and engine’s version.

Logical Assignment Operators by Justin Ridgewell #

As the name suggests, Logical assignments proposal is the combination of logical operators (&&, || and ??) and assignment operator (=). Convenient add-on to the language! Have a look.

// set a to b only when a is truthy
a &&= b;// set a to b only when a is falsy
a ||= b;// set a to b only when a is nullish
a ??= b;

Numeric separators by Sam Goto and Rick Waldron #

Large numbers are hard to read. Thanks to Rick Waldron, we can now separate the digits group using underscores (_, U+005F). This feature is well-known from other programming languages like Java, Python, Perl, Ruby, Rust, Julia, Ada, C#.

const population = 37_653_260