ECMAScript, focus on 2021’s features

ECMAScript, focus on 2021’s features

ECMA, What is it ?

European Computer Manufacturers Association is the historic name given to the industry association dedicated to the standardization of information and communication systems. Currently this company is called Ecma International.

And ECMAScript ?

It’s a group of norms dedicated to type Script’s programming language and standardizing by Ecma International for ECMA-262 specification. This norms permits to manage different scripts like JavaScript or ActionScript. 

 What’s up in the web sphere?

This company has approved the last version of ECMAScript for 2021. In this one we could find any new features like “primes” and an amelioration of string chains.

  • String.prototype.ReplaceAll() : this feature permits for each webmaster to replace all occurrences of a chain without use a global regex.
const string = "it-is-just-a-test";   // instead of doing this string.replace(/-/g, "_") // "it_is_just_a_test"   // in ES2021 we can do string.replaceAll("-", "_") // "it_is_just_a_test"
  • AggregateError ():  represents an error when several errors need to be wrapped in a single error. It is thrown when multiple errors need to be reported by an operation, for example by Promise.any(), when all promises passed to it are rejected.
  • Promise.any() : “Promises” aren’t a new concept in JavaScript community. It’s an object which represent success or fail of asynchronous operation and the value which might result. The ECMAScript standardizing owns 3 combinations Promise.all(), Promise.race(), Promise.allSettled(). ES21 brings one new on this list with Promise.any().

const API = ""
  .then(response => response.json())
  .then(({name}) => console.log(`Cool dude is: ${name}`))
  .catch(error => console.error(error));

The difference between Promise.race() and Promise.any() is that Promise.race() return the first set value (fulfilled or rejected). Promise.any() skip rejected promise until the first fulfilled promise.  If an empty iterable is passed, the method returns an already resolved Promise. If all of the Promise data is rejected, the method rejects asynchronously with Aggregate Error, a new error subclass that groups individual errors. Promise.any () is still in the experimental phase and is not yet fully supported by browsers.

  • WeakRef (): refer to a target object without preserving it from the garbage collector. This proposal incorporates major new features: creating weak references to objects with the WeakRefcode class, and running user-defined finalizers after picking up objects, using the FinalizationRegistry class. Another added feature, WeakRef and FinalizationRegistry, are considered advanced features, as their proper use requires careful consideration. It is best to avoid them, if possible.
  • FinalizationRegistry () : manages the registration and deregistration of cleaning operations performed during the pickup of target objects. FinalizationRegistry is a complementary function of WeakRef.
const obj = { spec: "ES2021" }; 
const registry = new FinalizationRegistry(value => {     console.log(`The ${value} object has been garbage collected.`) 
registry.register(obj, "ECMAScript 2021");   // perform some action that triggers garbage collector on obj // 
The ECMAScript 2021 object has been garbage collected.
  • Array.prototype.sort : more accurate in order to reduce the cases where the sort order is defined by the implementation.
  • Numeric separator : To improve readability and to separate groups of digits, numeric literals use underscores as separators.  It also can be used for Binary, Hex, Octal bases.
  • Logical Assignment Operator with &&

Logical assignment operator combines the logical operations(&&, || or ??) with assignment.

var x = 1;
var y = 2;
x = y;
console.log(x); // 2

Techincally here’s what is actually going on

if(x) {
 x = y;

Since x is a truthy value, it is assigned with the value of y, ie 2.

Just like the way we did with &&, we can do with || and ??.

x &&= y;
x ||= y;
x ??= y;
  • Logical assignment operator with ||
var x = 1;
var y = 2;
x ||= y;

That means, the assignment operation happens only if x is a falsy value. In our code, x contains 1 which is a truthy value and hence, assignment does not happen. That is why our code prints 1 in the console.

  • Logical assignment operator with ??

?? is Nullish Coalescing operator in JavaScript. It specifically checks if a value is null or undefined.

var a;
var b = a ?? 5;

In line 2, if the value of a is null or undefined, the right hand side of ?? is evaluated and assigned to b.

Let us now consider ?? along with =.

var x;
var y = 2;
x ??= y;
console.log(x); // 

Here the value of x is undefined. So the right hand side expression is evaluated and sets x to 2.

The ECMAScript 2021 specification follows on from the ECMAScript 2020’s one, officially approved last June. ECMAScript 2020 had introduced several features, including a new import function for loading modules with a BigInt type that allows working with arbitrary precision integers.

Thibault M


Laisser un commentaire