DEV Community

Cover image for Mindblowing🤯 features in Javascript
Kai Wenzel
Kai Wenzel

Posted on

Mindblowing🤯 features in Javascript

The JavaScript language specification, also known as ECMAScript or ES, is a living document, modified every year in response to evolving needs. While JavaScript started as a scripting language, the ECMAScript specification overview notes that the language “is now used for the full spectrum of programming tasks in many different environments and scales." Because of this, JavaScript is better understood as a fully featured general-purpose programming language.

With the upcoming ECMAScript 2022 release just around the corner, let's take a look at the new JavaScript language features introduced in ECMAScript 2021.

String.prototype.replaceAll

The replaceAll() method takes a string or regular expression, called the pattern, as its first argument. The second argument is the pattern's replacement. Given the first and second argument, replaceAll() returns a new string that will be the source string with all instances of the pattern swapped for the replacement. The source string is not affected.

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

The replaceAll() method works exactly like replace(), but applies to all occurrences in the string, instead of just the first one. It’s a welcome addition after years of having to use a library or hand-coded solution.

Let's have a look at a simple example, wherein we mangle some Shakespeare.

let quote = "all the world's a stage, and all the men and women merely players";
let newQuote = quote.replaceAll("all", "most of");
console.log(newQuote);
Enter fullscreen mode Exit fullscreen mode

promise.any()

The promise.any() method takes a collection of promises and allows you to respond to the first one that completes successfully by returning a new promise.

If any promises are rejected, they are ignored. (Note this method's contrast with promise.all(), which stops with any error or rejection; and with promise.allSettled(), which lets you observe all promises that resolved in a collection, even if there were intervening errors.)

If any of the promises error out, promise.any() will still act upon the first resolved promise in the collection.

The promise.any() method returns a rejected promise if none of the passed-in promises resolves. The error it returns is AggregateError, which is a new error type also introduced by ECMAScript 2021. AggregateError represents the summary of all errors encountered.

You can use promise.any() to roll up many promises into a single one. This promise will resolve to whichever of the collection resolves first, ignoring errors and rejections. Let's have a look at a simple example:

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

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

let promises = [promise1, promise2];

Promise.any(promises).then((firstResolved) => {
  console.log(firstResolved); // outputs “1 second”
})
Enter fullscreen mode Exit fullscreen mode

Now consider the example below, wherein all promises eventually fail as rejected.

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

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

let promises = [promise1, promise2];

Promise.any(promises).then((firstResolved) => {
  console.log(firstResolved);
}).catch((err) => { console.log("error: " + err) }) // outputs error: AggregateError: All promises were rejected
Enter fullscreen mode Exit fullscreen mode

In this example, we add a catch handler, which fires after both promises are rejected. Notice that AggregateError is an object holding information about the failed promises.

Let's get a closer look at AggregateError, which is another new feature in ECMAScript 2021.

AggregateError

AggregateError is a special kind of error subclass that combines many errors into a summary object. As you saw, the promise.any() method in Listing 3 created an AggregateError.

In that example, all promises passed to promise.any() failed, so the method returned an AggregateError. The error contained a message describing the error and an array with details about each error. The code below shows the contents of the error returned.

AggregateError: All promises were rejected
  errors: Array(2)
    0: "1 second"
    1: "2 second"
      length: 2
  message: "All promises were rejected"
  stack: "AggregateError: All promises were rejected"
Enter fullscreen mode Exit fullscreen mode

As shown, AggregateError gives you access to the promise messages that contributed to the error, via AggregateError.errors.

New logical assignment operators

JavaScript has familiar math assignment operators such as +=, which perform the operation and assignment in one go, as a kind of convenience. ECMAScript 2021 adds similar support to the logical operators ||, ??, and &&.

Let’s take a look at each of these.

Nullish assignment (??=)

You can use the nullish assignment operator to test a variable for being null or undefined. If the variable is null or undefined, you can assign the right side of the expression to the variable. The code below is an example.

let quote = "When goodness is lost there is morality.";
let existingQuote = "A leader is best when people barely know he exists";
let nonExistingQuote = null;
existingQuote ??= quote;
nonExistingQuote ??= quote;
console.log(existingQuote); // A leader is best when people barely know he exists
console.log(nonExistingQuote); // When goodness is lost there is morality.
Enter fullscreen mode Exit fullscreen mode

Notice that when used on a variable that exists, like existingQuote, the nullish assignment operator does nothing. When used on nonExistingQuote, however, it assigns the quote a new value.

Even if the string were empty for existingQuote (which is a falsy value in JavaScript), the nullish assignment will not replace it; it will remain an empty string. That is the essence of the operator: it only tests for null or undefined.

And assignment (&&=)

The and assignment operator (&&=) tests the left side of an expression. If the left side is truthy, it assigns the right side of the expression. If it is falsy, the operator does nothing. The code below shows a simple example.

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

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

As the exapmle shows, the first console log outputs an empty string. This is because the empty string is falsy, so the &&= operator does not assign it a new value. The second console outputs "bar". This is because nonEmptyString is “foo”, which is a truthy value.

&&= is a kind of edge case operator, but useful when you need it.

Or assignment (||=)

The or assignment operator is the opposite of the and assignment operator you just saw. We can use the same example from above, this time replacing &&= with ||=.

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

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

If the left side of the expression is falsy, the ||= assignment operator resolves to the right side. Therefore, in this case, the emptyString becomes “bar”. The nonEmptyString variable stays with its truthy value of “foo”.

Numeric literal separators

Numeric separators are a nicety that make looking at large number easier on the eyes. JavaScript can’t use commas like natural languages, because that symbol is already taken. So, ECMAScript 2021 introduced the underscore.

Instead of typing

let distanceToSun = 91772000000;
Enter fullscreen mode Exit fullscreen mode

you can type

let distanceToSun = 91_772_000_000;
Enter fullscreen mode Exit fullscreen mode

The new form is quite a bit easier to read.

Conclusion

In 2021 we got some mindblowing und useful tools to work with. Not only that, there are also some new techniques who you can check out on the official Ecmascript website. I hope that you enjoyed this articel and learned something new!

Enjoy your day!

Discussion (2)

Collapse
andrewbaisden profile image
Andrew Baisden

These new features will get so much usage.

Collapse
kai_wenzel profile image
Kai Wenzel Author

Yeah!