Latest ECMAScript 2021 / ES12 | Feature in Javascript

ecmascript 2021

In this blog, we will discuss the coolest new Javascript ECMAScript 2021 / ES12 features. I will cover the one that you guys probably should know and things that you should use in your everyday javascript world. Almost all modern browsers support ES8. You can even view our ES8ES9,  ES10 and ES11 for the latest update on EcmaScript

ECMAScript 2021 / ES12 Feature

ReplaceAll Method

Before ES12, to replace a string in Javascript, you need to use replace(). For Example

let text = "InfoHubBlog is Tech Blog."
text = text.replace("Blog","X");
console.log(text); //OUTPUT: InfoHubX is Tech Blog.

In Above Example it just replaces the initial word. If you want to replace all the words then it is only Possible with RegExp for Example

let text = "InfoHubBlog is Tech Blog."
text = text.replace(new RegExp("Blog","g"),"X");
console.log(text); //OUTPUT: InfoHubX is Tech X.

If you don’t want to use Regular Expression then ES12 has introduced a new String prototype i.e. replaceAll. It Replaces all words in a string without using any Regular Expression.

let text = "InfoHubBlog is Tech Blog."
text = text.replaceAll("Blog","X");
console.log(text); //OUTPUT: InfoHubX is Tech X.

This is a very simple addition. There is no complex thing as this can already be achieved using RegExp and replace method. This is useful when you have a complicated string and wants to escape the value then in that case you can use replaceAll because it becomes complicated writing syntax for Regular Expression.

Promise.any()

Promises are already there in Javascript. Any is just method added to existing Promise. Promise.any() make sure that as soon as anyone promise gets fulfilled then it returns that Single Promise with value. If all Promises passed in Promise.any() is rejected then it returns a Promise with AggregateError. This Promise.any() is opposite to Promise.all().

let p1= new Promise((resolve,reject)=>reject("P1"))
let p2= new Promise((resolve,reject)=>setTimeout(resolve,10,"P2"))
let p3= new Promise((resolve,reject)=>setTimeout(resolve,20,"P3"))
Promise.any([p1,p2,p3]).then((fulfill)=>{
console.log(fulfill) //OUTPUT: P2
})

In the above example p2 succeed so the output is “P2”. In Below Example all Promises get rejected so in this you will get “AggregateError: All promises were rejected”.

let p1= ()=>new Promise((resolve,reject)=>reject("P1"))
let p2= ()=>new Promise((resolve,reject)=>setTimeout(reject,10,"P2"))
let p3= ()=>new Promise((resolve,reject)=>setTimeout(reject,20,"P3"))
Promise.any([p1(),p2(),p3()]).then((fulfill)=>{
console.log(fulfill)
}).catch((e)=>{
console.log(e)
})
ecmascript 2021
ECMAScript 2021

AggregateError: When you want to represent all errors in a single line then it is called as AggregateError. In Above Example you can see all Promises are rejected so Aggregate Error is thrown.

You can even check whether the type of error using instanceof.

Logical Operator

We are already aware of “+=” but now javascript has extended to Logical AND(“&&”), Logical OR(“||”) and Logical Nullish(“??”) as well.

x||=y is Equivalent to :

x || (x=y)

x||=y is Not Equivalent to :

x = x || y

Similarly above example is equivalence for Logical AND and Logical Nullish. I will suggest you not to use this and stick to && rather than &&= because it will make code more confusing. && is more cleaner and explicit syntax compared to &&=.

Numeric Separators

It was already there in the V8 engine but was not accepted in ECMAScript but now technically it is available in ECMAScript. You can enter a big number and get confused so what can you do is add an underscore separator anywhere in your number.

let value = 10_00_00_00_00_000
console.log(value) //OUTPUT: 1000000000000

This is just for developer experience that you are able to read your number inside the code.

WeakRef

Now it is possible to create a weak reference to an object which mean the object which you created need not be held into the memory. Javascript can clean up any time. Normal Object keeps the reference in memory. If Object is WeakRef then Garbage Collector completely removes and you can’t get object anymore.

const strongReference = { name:"InfoHuBlog",id:100
         };
const weakReference = new WeakRef(
        { name:"InfoHuBlog",id:100 
        });

During garbage collection running, if there is a weak reference to a target object, the javascript engine safely removes a target object from memory space is freed.

This will be useful during WebSocket communication with short time execution

Hope you like our Javascript ECMAScript 2021 / ES12 features blog. Please subscribe to our Blog for upcoming blogs.

Happy Coding!

Read more: Important Javascript ES8 Features Important ES9 Javascript FeatureImportant Javascript ES10 FeaturesTop ES11 Features | JavascriptDifferent types of While For Loop Javascript ES6ECMAScript

Be the first to comment on "Latest ECMAScript 2021 / ES12 | Feature in Javascript"

Leave a comment

Your email address will not be published.


*