Posted 4 months ago. Visible to the public.

JavaScript: New Features in ES2021


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


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() 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 = 10000 // 10s // or like this = 10 * 1000 // you can use numeric separators instead = 10_000


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

For details see WeakRefs TC39 proposal Archive and MDN Archive .

Further Reading

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Last edit:
4 months ago
by Julian
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Julian to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more