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.

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

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

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.

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

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.

<code>let count = realCount ?? 'unavailable';
</code>

Numeric Separators

Long numeric literals can be made more readable using the underscore (

_

) separator.

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

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.

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

Intl.ListFormat

Intl.ListFormat

formats lists according to locale. For example:

<code>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"
</code>

Intl.DateTimeFormat dateStyle and timeStyle

ES2021 adds

dateStyle

and

timeStyle

options to

Intl.DateTimeFormat

for convenient formatting.

<code>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"
</code>

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