What New JavaScript Features Arrive in ES2021? A Complete Preview

Feature Overview

String.prototype.replaceAll

Most developers have used String.prototype.replace to replace parts of a string that match a regular expression. However, when the pattern is a plain string, only the first occurrence is replaced. The new String.prototype.replaceAll API allows replacing all occurrences without using a regex.

const str = 'I like frontend. I like JavaScript.';
const newStr = str.replace('like', 'love');
newStr; // "I love frontend. I like JavaScript."

const str = 'I like frontend. I like JavaScript.';
const newStr = str.replaceAll('like', 'love');
newStr; // "I love frontend. I love JavaScript."

The API is already implemented in the latest versions of some browsers, but not yet available in Edge, Opera, or Node.js.

Promise.any

The Promise family has grown beyond Promise.all and Promise.race to include Promise.allSettled (ES2020). The new Promise.any returns the first fulfilled promise from an array, or rejects with an AggregateError if all promises reject.

Promise.any(promises).then(
  (first) => { /* any promise fulfilled */ },
  (error) => { /* all promises rejected */ }
);

Logical Assignment Operators

ES2021 adds shorthand forms for logical operators. The expressions a ||= b, c &&= d, and e ??= f are equivalent to a = a || b, c = c && d, and e = e ?? f respectively. The nullish coalescing assignment ( ??=) only uses the right‑hand value when the left side is null or undefined, avoiding bugs where 0 is treated as falsy.

let count = realCount ?? 'unavailable';

Numeric Separators

Long numeric literals can be made more readable using the underscore ( _) separator.

let x = 2_3333_3333; // same as 233333333 but easier to read

WeakRef

The WeakRef class creates a weak reference to an object, allowing the object to be garbage‑collected even while referenced. Use new WeakRef(obj) to create the reference and ref.deref() to retrieve the original object, which returns undefined after garbage collection.

// someObj will not be prevented from garbage collection
let ref = new WeakRef(someObj);
let obj = ref.deref(); // undefined if someObj has been collected

Intl.ListFormat

Intl.ListFormat

formats lists according to locale. For example:

const list = ['Apple', 'Orange', 'Banana'];
new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list);
// "Apple, Orange and Banana"
new Intl.ListFormat('zh-CN', { style: 'short', type: 'conjunction' }).format(list);
// "Apple、Orange和Banana"

Intl.DateTimeFormat dateStyle and timeStyle

ES2021 adds dateStyle and timeStyle options to Intl.DateTimeFormat for convenient formatting.

let fmt = new Intl.DateTimeFormat('en', { timeStyle: 'short' });
fmt.format(Date.now()); // "13:31"

fmt = new Intl.DateTimeFormat('en', { dateStyle: 'short' });
fmt.format(Date.now()); // "21/03/2012"

fmt = new Intl.DateTimeFormat('en', { dateStyle: 'short', timeStyle: 'medium' });
fmt.format(Date.now()); // "21/03/2012, 13:31"

These APIs are supported in the latest Chrome versions; remember to handle compatibility for production use.