8 great new JavaScript language features in ES12

The JavaScript language specification, often known as ECMAScript or ES, is a dwelling doc, modified yearly in response to evolving wants. Whereas JavaScript began as a scripting language, the ECMAScript specification overview notes that the language “is now used for the complete spectrum of programming duties in many various environments and scales.” Due to this, JavaScript is best understood as a completely featured general-purpose programming language.

With the upcoming ECMAScript 2022 launch simply across the nook, let’s check out the brand new JavaScript language options launched in ECMAScript 2021.


The replaceAll() methodology takes a string or common expression, known as the sample, as its first argument. The second argument is the sample’s substitute. Given the primary and second argument, replaceAll() returns a brand new string that would be the supply string with all cases of the sample swapped for the substitute. The supply string is just not affected.

In ECMAScript 2021, replaceAll() joins ECMAScript 2020’s matchAll() in enhancing the inherent capabilities of JavaScript’s built-in String object.

The replaceAll() methodology works precisely like change(), however applies to all occurrences within the string, as a substitute of simply the primary one. It’s a welcome addition after years of getting to make use of a library or hand-coded answer.

Itemizing 1 exhibits a easy instance, whereby we mangle some Shakespeare.

Itemizing 1. replaceAll()

let quote = "all of the world's a stage, and all of the women and men merely gamers";
let newQuote = quote.replaceAll("all", "most of");


The promise.any() methodology takes a set of guarantees and permits you to reply to the primary one which completes efficiently by returning a brand new promise.

If any guarantees are rejected, they’re ignored. (Word this methodology’s distinction with promise.all(), which stops with any error or rejection; and with promise.allSettled(), which helps you to observe all guarantees that resolved in a set, even when there have been intervening errors.)

If any of the guarantees error out, promise.any() will nonetheless act upon the primary resolved promise within the assortment.

The promise.any() methodology returns a rejected promise if not one of the passed-in guarantees resolves. The error it returns is AggregateError, which is a brand new error kind additionally launched by ECMAScript 2021. AggregateError represents the abstract of all errors encountered.

You should use promise.any() to roll up many guarantees right into a single one. This promise will resolve to whichever of the gathering resolves first, ignoring errors and rejections.  Itemizing 2 has a easy instance.

Itemizing 2. promise.any()—all resolved

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "1 second");

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, "2 second");

let guarantees = [promise1, promise2];

Promise.any(guarantees).then((firstResolved) => {
  console.log(firstResolved); // outputs “1 second”

Now contemplate Itemizing 3, whereby all guarantees ultimately fail as rejected.

Itemizing 3. promise.any()—all rejected

const promise1 = new Promise((resolve, reject) => {
  setTimeout(reject, 1000, "1 second");

const promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 2000, "2 second");

let guarantees = [promise1, promise2];

Promise.any(guarantees).then((firstResolved) => {
}).catch((err) => { console.log("error: " + err) }) // outputs error: AggregateError: All guarantees have been rejected

In Itemizing 3, we add a catch handler, which fires after each guarantees are rejected. Discover that AggregateError is an object holding details about the failed guarantees. 

Let’s get a better take a look at AggregateError, which is one other new function in ECMAScript 2021.


AggregateError is a particular sort of error subclass that mixes many errors right into a abstract object. As you noticed, the promise.any() methodology in Itemizing 3 created an AggregateError.

In that instance, all guarantees handed to promise.any() failed, so the strategy returned an AggregateError. The error contained a message describing the error and an array with particulars about every error. Itemizing 4 exhibits the contents of the error returned.

Itemizing 4. AggregateError

AggregateError: All guarantees have been rejected
  errors: Array(2)
    0: "1 second"
    1: "2 second"
      size: 2
  message: "All guarantees have been rejected"
  stack: "AggregateError: All guarantees have been rejected"

As proven, AggregateError provides you entry to the promise messages that contributed to the error, through AggregateError.errors.

New logical project operators

JavaScript has acquainted math project operators resembling +=, which carry out the operation and project in a single go, as a sort of comfort. ECMAScript 2021 provides comparable assist to the logical operators ||, ??, and &&.

Let’s check out every of those.

Nullish project (??=)

You should use the nullish project operator to check a variable for being null or undefined. If the variable is null or undefined, you’ll be able to assign the proper aspect of the expression to the variable. Itemizing 5 is an instance.

Itemizing 5. The ??= project in motion

let quote = "When goodness is misplaced there may be morality.";
let existingQuote = "A frontrunner is finest when individuals barely know he exists";
let nonExistingQuote = null;
existingQuote ??= quote;
nonExistingQuote ??= quote;
console.log(existingQuote); // A frontrunner is finest when individuals barely know he exists
console.log(nonExistingQuote); // When goodness is misplaced there may be morality.

Discover that when used on a variable that exists, like existingQuote, the nullish project operator does nothing. When used on nonExistingQuote, nonetheless, it assigns the quote a brand new worth. 

Even when the string have been empty for existingQuote (which is a falsy worth in JavaScript), the nullish project is not going to change it; it’ll stay an empty string.  That’s the essence of the operator: it solely assessments for null or undefined.

And project (&&=)

The and project operator (&&=) assessments the left aspect of an expression. If the left aspect is truthy, it assigns the proper aspect of the expression. Whether it is falsy, the operator does nothing. Itemizing 6 exhibits a easy instance.

Itemizing 6. The &&= project in motion

let emptyString = "";
emptyString &&= "bar";
console.log (emptyString); // “”

let nonEmptyString = "foo";
nonEmptyString &&= "bar";
console.log(nonEmptyString); // “bar”

In Itemizing 6, the primary console log outputs an empty string. It’s because the empty string is falsy, so the &&= operator doesn’t assign it a brand new worth. The second console outputs “bar“. It’s because nonEmptyString is “foo”, which is a truthy worth.

&&= is a sort of edge case operator, however helpful while you want it.

Or project (||=)

The or project operator is the other of the and project operator you simply noticed. We are able to use the identical instance from Itemizing 6, this time changing &&= with ||=.

Itemizing 7. The ||= project in motion

let emptyString = "";
emptyString ||= "bar";
console.log (emptyString); // “bar”

let nonEmptyString = "foo";
nonEmptyString ||= "bar";
console.log(nonEmptyString); // “foo”

If the left aspect of the expression is falsy, the ||= project operator resolves to the proper aspect. Subsequently, on this case, the emptyString turns into “bar”. The nonEmptyString variable stays with its truthy worth of “foo”.


WeakRef is used to seek advice from a goal object with out preserving it from rubbish assortment. It’s a quite esoteric language function, not a lot utilized by the working coder. The one frequent use case for WeakRef is in implementing caches or mappings for big objects, “the place it’s desired that a big object is just not saved alive solely as a result of it seems in a cache or mapping.”

So, if you end up constructing a caching answer for big entities, keep in mind that WeakRef exists. In any other case, if you’re unsure about needing a WeakRef variable reference, you in all probability ought to keep away from utilizing it. (The spec itself recommends  avoidance.)


It’s a little bit of programming irony that JavaScript launched FinalizationRegistry virtually concurrently with Java’s deprecation of Object.finalize(). The options are virtually analogous. Like WeakRef, the specification warns builders away from user-defined finalizers

For some use instances, nonetheless, the brand new FinalizationRegistry may very well be simply what you want. The specification affords the instance of long-running processes consuming many file handles. In such a case, utilizing FinalizationRegistry may guarantee no handles are leaked.

Together with WeakRef, FinalizationRegistry matches higher into the toolbox of platform and framework builders, quite than software builders.

Numeric literal separators

Numeric separators are a nicety that make taking a look at giant quantity simpler on the eyes. JavaScript can’t use commas like pure languages, as a result of that image is already taken. So, ECMAScript 2021 launched the underscore.

As a substitute of typing

let distanceToSun = 91772000000;

you’ll be able to kind

let distanceToSun = 91_772_000_000;

The brand new type is kind of a bit simpler to learn.

Array.prototype.type enhancements

That is extra of a notice than a function. Mainly, the ECMAScript 2021 spec is extra actual in its description of how Array.prototype.type works. The change ought to reduce variations in implementation between engines.

Copyright © 2022 IDG Communications, Inc.

Supply hyperlink

Leave a Reply

Your email address will not be published.