DEV Community

Siddharth
Siddharth

Posted on

13 4

Features introduced in ES2021 ✨✨

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay