JavaScript: New Features in ES2021

tl;dr

With ES2021 you now can use str.replaceAll(), Promise.any(), logical assignment operators, numeric separators and WeakRef on all major browsers except IE11.

replaceAll

JavaScript's replace(searchValue, replaceValueOrFn) by default replaces only the first match of a given String or RegExp.
When supplying a RegExp as the searchValue argument, you can specify the g ("global") modifier, but you have to remember doing that, hence using replace when you expect global replacement is prone to errors.
When supplying strings as the searchValue argument, you are out of luck.

'Hello World'.replace(/o/g, 'ö')
// => 'Hellö Wörld'

'Hello World'.replace(/o/, 'ö')
// => 'Hellö World' // oops

'Hello World'.replace('o', 'ö')
// => 'Hellö World' // no global replacement for strings

Enter replaceAll: With replaceAll(searchValue, replaceValueOrFn) you can easily replace all occurences of a given String or Regex.

'Hello World'.replaceAll(/o/g, 'ö')
// => 'Hellö Wörld' // same as replace

'Hello World'.replaceAll(/o/, 'ö')
// Raises TypeError: String.prototype.replaceAll called with a non-global RegExp argument

'Hello World'.replaceAll('o', 'ö')
// => 'Hellö Wörld' // replaced in the entire string

We recommend you use replace only when you know that you want to replace the first occurence but not all.

Promise.any

Promise.any() is the opposite of Promise.all(), it is only interested in the first fulfillment.

await Promise.any([
  new Promise((resolve) => setTimeout(() => resolve('A'), 100)),
  new Promise((resolve, reject) => setTimeout(() => reject('B'), 25)),
  new Promise((resolve) => setTimeout(() => resolve('C'), 50))
]).then((winner) => `And the winner is ${winner}`)

// => 'And the winner is C'

Logical Assignment Operators

As Rubyists we like to use the logical assignment operator ||=. The logical assignment operators &&=, ||= and ??= are now also available in JavaScript.

let name
// => undefined

name ??= 'Alice' // assigns if name is null or undefined
// => 'Alice'

name = null
name ??= 'Bob'
// => 'Bob'

name = ''
name ??= 'Charlie'
// => ''

name ||= 'Dave' // assigns if name is falsey (also empty string, zero)
// => 'Dave'

Numeric Separators

You can use _ as separator in numeric values (like in Ruby). This increases readability.

// Instead of doing something like this
up.link.config.preloadDelay = 10000 // 10s

// or like this
up.link.config.preloadDelay = 10 * 1000

// you can use numeric separators instead
up.link.config.preloadDelay = 10_000

WeakRef

WeakRef objects can reference other objects without preventing those from being garbage-collected.

For details see WeakRefs TC39 proposal Show archive.org snapshot and MDN Show archive.org snapshot .