JavaScript in 2021: the new Features

New year, new JavaScript Features. The Release of the new ECMAScript versions of traditionally takes place in June of a year, we’ve seen the 2021 planned new Features in advance already.

Every year, the ECMAScript specification receives an Update. Last updated on comprising the jump from ECMAScript 5 to ECMAScript 6 was the most in 2015. In comparison, in ECMAScript 2021 expected innovations are small, but still worth a closer look.

String replaceAll()

Currently, there is no other way to replace all instances of a Substring, as on the slightly hacky combination of methods .split() and .join() or replace() in combination with a so-called global Regular Expression (/regexp/g).

const snow = ‘❄️+☃️+❄️+❆’;
const snow with penguins = snow.replace(/+/g, ‘ ‘);
console.log(snow with penguins); //❄️ ☃️ ❄️ ❆

The new replaceAll () method in ECMAScript 2021 makes the use of a Regex obsolete:

const snow = ‘❄️+☃️+❄️+❆’;
const snow with penguins = snow.replaceAll(‘+’, ‘ ‘);
console.log(snow with penguins); //❄️ ☃️ ❄️ ❆

Another example to illustrate:

const cuteAnimal = “I love Penguins. Penguins are adorable, especially when they are fishing.”;

let newCuteAnimal = cuteAnimal.replaceAll(“Penguin”, “Bear”);

console.log(newCuteAnimal); //I love Bears. Bears are adorable, especially when they are fishing.

In addition, the new replaceAll () method to bring a small performance increase, because instead of a Regular Expression match on a String Comparison is used.

Promise.any()

Similar to other Promise-methods Promise iterates.any() on an Iterable of Promise objects. Unlike Promise.all() stops Promise.any() is not as soon as one of the Promises will not be fulfilled, but through the Array until one of the Promises will be fulfilled. This is the case, the Promise.any () method does not check the value of the first fulfilled Promise back, the other Promises to be. None of the Promises will be fulfilled in the Array, the Output of Promise.any() with an Aggregate Error object rejected.

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, ‘quick’));
const promise2 = new Promise((resolve) => setTimeout(resolve, 300, ‘not so quick’));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, ‘slow’));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value));

// Expected output: “quick”

Promise.any() is useful to check if an Iterable (an Array) of Promises at least a Promise that is fulfilled. The method differs from the promise.race(), as that is not the value of the first running of Promise, regardless of the given whether it is fulfilled or rejected, but the first one is fulfilled. Promise.all() differs in so far, that not all of the Promises checked in a Iterablen and their Values – provided that all of the meets will be issued in an Array.

tldr: Promise.any() takes an Iterable of Promise objects, and resolve, if one of the Promises resolves. It returns a single Promise – and the first one that resolves with the value from the Promise.

Use Case: Promise.any (), you can use as a outsourcing developer, if in an application, multiple asynchronous calculations are performed and only the first successful is interesting. Imagine a race in which the winner is the fastest calculation is used:

const myFetch = url => setTimeout(() => fetch(url), Math.floor(Math.random() * 4000));
const promises = [
myFetch(‘/endpoint-1’),
myFetch(‘/endpoint-2’),
myFetch(‘/endpoint-3’),
];

// Example using .then .catch
Promise.any(promises) // Any of the promises fullfilled.
.then(console.log) // e. g. ‘4’
.catch(console.error); //All of the promises were rejected.

// Example using async-await
try {
const first = await Promise.any(promises); // Any of the promises fullfilled.
console.log(first);
}catch (error) { // All of the promises were rejected
console.log(error);
}

Numeric Separators

This new Feature is intended to improve the readability of numeric literals.
An underscore _ can be used from THERE in 2021 as a separator between groups of digits. The separators can theoretically be anywhere in any number of uses – it is advisable that a certain System, proceed, go without saying.

const twoBillion = 2000000000;
const twoBillionWithSeparators = 2_000_000_000;
const twoBillionAndALittleMore = 1_000_ooo_000.999_999;

Logical Assignment Operator

The new Logical Assignment Operator combines the so-called logical operators AND &&, OR||, and zero addition operator ?? with Assignment Expressions =, which leads to a slightly shorter Syntax. Details and Code examples you can find in this tool tip.

WeakRef

Objects are referenced in JavaScript, by Default strong. This means that referenced objects are not kept in memory, adjusted, but in the memory.

let a, b;
a = b = document.querySelector(‘.refClass’)
a = undefined
// … Garbage collecting…
// b is still referenced to the DOM object .refClass

In a scenario in which objects are not infinite in memory, can be used with IT in 2021 so-called Weak References is to implement Caches or Mappings, for example, to very large objects. WeakRef causes them to be adjusted if they are not used from the memory and, if necessary, new from the Cache can be generated.

Creates such a weak reference on new WeakRef. The access to the object via the method .deref().

const example = new WeakRef(document.querySelector(‘.refClass’));
const element = example.deref();

Those who want to keep the development of the ECMAScript specification to June in the eye, takes on GitHub, the Proposals Repository.

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png