Posted 4 months ago. Visible to the public.

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.

Copy
'Hello World'.replace(/o/g, 'ö') // => 'Hellö Wörld'
Copy
'Hello World'.replace(/o/, 'ö') // => 'Hellö World' // oops
Copy
'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.

Copy
'Hello World'.replaceAll(/o/g, 'ö') // => 'Hellö Wörld' // same as replace
Copy
'Hello World'.replaceAll(/o/, 'ö') // Raises TypeError: String.prototype.replaceAll called with a non-global RegExp argument
Copy
'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.

Copy
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.

Copy
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.

Copy
// 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 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:

Avatar
Julian
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