Some outstanding features in JavaScript ES12 2021

Monday, 22/02/2021

Tram Ho

Some features stand out in javascript ES12

Introduce
Private Accessors
Promise.any () and AggregateError
Numeric Separators
String.prototype.replaceAll ()
Logical Assignment Operators
Conclude

1. Introduction

ES12 2021 is in phase 4 and is expected to launch this year with many useful features.
It allows us to be easy to use, saves time, and makes the code a lot easier to read.
These outstanding features will be listed in the article below.

2. Private Accessors

Accessors functions can be made private by writing # before the function

For example:

class Cat {
  // Public accessor
  get cat_name() { return "Luchi" }
  set cat_name(value) {}

  // Private accessor
  get #cat_age() { return 2 }
  set #cat_age(value) {}
}

class Cat {

// Public accessor

get cat_name() { return "Luchi" }

set cat_name(value) {}

// Private accessor

get #cat_age() { return 2 }

set #cat_age(value) {}

}

get and set in the above code is the keyword that makes cat_name () an access attribute. Although cat_name () looks like a function, it can be read as an ordinary property like so:

const obj = new Cat();
console.log(obj.cat_name); // "Luchi"
console.log(obj.cat_age); // undefined

const obj = new Cat();

console.log(obj.cat_name); // "Luchi"

console.log(obj.cat_age); // undefined

3. Promise.any () and AggregateError

Promise.any () is called immediately after any promises are made or all of them are rejected.

Promise.any([
  fetch('https://dantri.com/').then(() =&gt; 'dantri'),
  fetch('https://facebook.com/').then(() =&gt; 'facebook'),
  fetch('https://volam2.vn/').then(() =&gt; 'volam2')
]).then((first) =&gt; {
  // Any of the promises was fulfilled.
  console.log(first);
  // -&gt; 'dantri'
}).catch((error) =&gt; {
  // All of the promises were rejected.
  console.log(error);
})

Promise.any([

fetch('https://dantri.com/').then(() => 'dantri'),

fetch('https://facebook.com/').then(() => 'facebook'),

fetch('https://volam2.vn/').then(() => 'volam2')

]).then((first) => {

// Any of the promises was fulfilled.

console.log(first);

// -> 'dantri'

}).catch((error) => {

// All of the promises were rejected.

console.log(error);

})

Three concurrent requests are shown in the code above. Once one of the requests is resolved, Promise.any is also resolved and records the first resolved request in the console (dantri in the example above).
If all promises are rejected, Promise.any will throw a new exception of the error: AggregateError.
What’s new about it is that the AggregateError object represents an error where several errors are encapsulated in a single error.
It should look like this:

Promise.any([
  Promise.reject(new Error("error 1")),
  Promise.reject(new Error("error 2")),
  Promise.reject(new Error("error 3")),
]).then((first) =&gt; {
  console.log(first);
}).catch((error) =&gt; {
  console.log(e.message);  // "All Promises rejected"
  console.log(e.name);     // "AggregateError"
  console.log(e.errors);   // [ Error: "error 1", Error: "error 2", Error: "error 3" ]
})

Promise.any([

Promise.reject(new Error("error 1")),

Promise.reject(new Error("error 2")),

Promise.reject(new Error("error 3")),

]).then((first) => {

console.log(first);

}).catch((error) => {

console.log(e.message); // "All Promises rejected"

console.log(e.name); // "AggregateError"

console.log(e.errors); // [ Error: "error 1", Error: "error 2", Error: "error 3" ]

})

The above e.errors is an array of errors object.

4. Numeric Separators

When we work with large numbers it can be difficult or confusing. For example: “21989854”. Look closely to see that this is 21 million and …
With the new feature of ES2021, we can rewrite with underscores to make it easier to see as “21_989_854”. It was much easier to see by looking at it. Now, we can clearly see that’s 21 million.
Hence, the Numeric Separators feature is meant to simply improve readability. It does not affect the performance of our application.

// previous syntax before ES12
const money = 1248723742;

// new syntax coming with ES12
const money = 1_248_723_742;

// previous syntax before ES12

const money = 1248723742;

// new syntax coming with ES12

const money = 1_248_723_742;

Looking at the example above we see that it is much easier to read.

5. String.prototype.replaceAll ()

In ES12 replaceAll is simplified in usage than before, instead of using regex we have simpler syntax.

// previous syntax before ES12
const fullname = 'fullname = Nguyen + Xuan + Hung'; 
const fullnameFormated = fullname.replace (/  + / g, '');
// Nguyen Xuan Hung

// new syntax coming with ES12
const fullname = 'fullname = Nguyen + Xuan + Hung'; 
const fullnameFormated = fullname.replaceAll ('+', '');
// Nguyen Xuan Hung

// previous syntax before ES12

const fullname = 'fullname = Nguyen + Xuan + Hung';

const fullnameFormated = fullname.replace (/ + / g, '');

// Nguyen Xuan Hung

// new syntax coming with ES12

const fullname = 'fullname = Nguyen + Xuan + Hung';

const fullnameFormated = fullname.replaceAll ('+', '');

// Nguyen Xuan Hung

6. Logical Assignment Operators

With ES12, there is a combination of the logic operator and the assignment expression:

a || = b 
// Tương đương với: a || (a = b), chỉ gán nếu a là Falsy.
a &amp;&amp; = b 
// Tương đương với: a &amp;&amp; (a = b), chỉ gán nếu a là Truthy.
a ?? = b 
// Tương đương với: a ?? (a = b), chỉ gán nếu a là Nullish.

a || = b

// Tương đương với: a || (a = b), chỉ gán nếu a là Falsy.

a && = b

// Tương đương với: a && (a = b), chỉ gán nếu a là Truthy.

a ?? = b

// Tương đương với: a ?? (a = b), chỉ gán nếu a là Nullish.

7. Conclusion

These are the new functions of ES12 I learned, you can refer to below:

Share the news now

Source : Viblo

Some outstanding features in JavaScript ES12 2021

Some features stand out in javascript ES12

1. Introduction

2. Private Accessors

3. Promise.any () and AggregateError

4. Numeric Separators

5. String.prototype.replaceAll ()

6. Logical Assignment Operators

7. Conclusion

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers