Features introduced in ES2021 ✨✨

Siddharth - Aug 2 '21 - - Dev Community

ES2021 is slowly coming out in browsers. Here's a
quick roundup of features provided by ES2021.

string.replaceAll (MDN)

Replaces all instances of a string.

'xx'.replace('x', 'y') //=> 'yx'
'xx'.replace(/x/g, 'y') //=> 'yy'
'xx'.replaceAll('x', 'y') //=> 'yy'
Enter fullscreen mode Exit fullscreen mode

Numeric separators (MDN)

Let's you seperate your numbers

const number = 1000000000; // Is this a billion? a hundred millions? Ten millions?
const number = 1_000_000_000; // Ah, so a billion

const FEE = 12300; // is this 12,300? Or 123, because it's in cents?
const FEE = 12_300; // $12,300 (woah, that fee!)
Enter fullscreen mode Exit fullscreen mode

Logical OR assignment (||=) (MDN)

Logical OR assignment (foo ||= bar) assigns to foo if it is falsy.

let foo;
foo ||= 'bar';
foo; //=> 'bar'

foo ||= 'baz';
foo; //=> 'bar' (no assignment because foo is truthy)
Enter fullscreen mode Exit fullscreen mode

Logical AND assignment (&&=) (MDN)

Logical AND assignment (foo &&= bar) assigns to foo if it is truthy.

let foo;
foo &&= 'bar';
foo; //=> undefined (no assignment because foo is falsy)

foo = 10;

foo &&= 'baz';
foo; //=> 'baz'
Enter fullscreen mode Exit fullscreen mode

Logical nullish assignment (??=) (MDN)

Logical AND assignment (foo ??= bar) assigns to foo if it is nullish (null or undefined).

let foo;
foo ??= 'bar';
foo; //=> 'bar'

foo = false;

foo ??= 'baz';
foo; //=> 'bar' (No assignment because foo is not nullish)
Enter fullscreen mode Exit fullscreen mode

Promise.any (MDN)

Basically Promise.race, but waits for resolvement instead of settlement.

WeakRef (MDN)

A WeakRef object lets you hold a weak reference to another object, without preventing that object from getting garbage-collected.

Support

You can check out details at CanIUse

Support is not too bad.

  • IE doesn't support any of these (but it doesn't matter).
  • Edge supports all of these from v85. Numeric separators are supported from v79, and WeakRef is supported from v84.
  • Firefox supports all of these from v79. Numeric separators are supported from v70, and String.replaceAll is supported from v77.
  • Chrome supports all of these from v85. Numeric separators are supported from v75, and WeakRef is supported from v84.
  • Opera supports Numeric separators from v62, and supports String.replaceAll from v71.
  • Safari on iOS supports all this from v14.7. Numeric separators are supported from v13, String.replaceAll is supported from v13.7, and Logical assignment and Promise.any are supported from v14.4
  • Android browser supports all this from v92
  • Opera Mobile supports String.replaceAll from v64
  • Chrome for Android supports all this from v92
  • Firefox for Android supports all this from v90
  • Samsung internet supports all this from v14.0. Numeric separators are supported from v11.1
  • Support on Opera Mini, QQ Browser, Baidu Browser, and KaiOS browser is unknown
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .