DEV Community

Cover image for ECMAScript 2021 New Updates
Animesh
Animesh

Posted on • Updated on

ECMAScript 2021 New Updates

INTRODUCTION😎

ECMAScript is a part of JavaScript language which is mostly used in web technology, building websites or web apps. ECMAScript is growing as one of the world's most widely used general-purpose programming languages. It is majorly used in embedding with web browsers and also adopted for server and embedded applications.

New updates to ECMAScript will release out this July. The new improvements are introduced to make JavaScript more powerful and also make working easy for developers. It provides new functions, simple ways to do complex works and much more.
ECAMA

NEW UPDATES🤩

The new JavaScript features in ECMAScript 2021 are:
1. Logical assignment operators
And & Equals (&&=)
OR & Equals (||=)
Nullish Coalescing & Equals (??=)
2. Numeric Separators
3. String replaceAll
4. Promise.any
5. Private class methods
6. Private Getters and setters

1. Logical assignment operators
Logical assignment operators introduce new operators which combine logical operators and assignment expressions.

And & Equals (&&=)
It assigns when the value is truthy.

Previous :

let x = 1;
if(x){
  x = 10;
}
// Output: x = 10
Enter fullscreen mode Exit fullscreen mode

New :

let x = 1;
x &&= 10
// Output: x = 10
Enter fullscreen mode Exit fullscreen mode

OR & Equals (||=)
It assigns when the value is falsy.

Previous :

let x = 0;
x = x || 10;
// Output: x = 10
Enter fullscreen mode Exit fullscreen mode

New :

let x = 0;
x ||= 10
// Output: x = 10
Enter fullscreen mode Exit fullscreen mode

Explanation the assignment operation happens only if x is a falsy value. if x contains 1 which is a truthy value, assignment does not happen. Here x contains 0 therefore assignment happens.

Nullish Coalescing & Equals (??=)
Symbol ?? is Nullish Coalescing operator in JavaScript. It checks if a value is null or undefined.

let x;
let y = 10;
x ??= y;
Enter fullscreen mode Exit fullscreen mode

Value of x is undefined, therefor the right hand side expression is evaluated and sets x to 10.

2. Numeric Separators
To improve readability and to separate groups of digits, numeric literals use underscores as separators.

// A billion dollar that I want to earn
const money = 1_000_000_000;
const money = 1_000_000_000.00;
// Also can be used for Binary, Hex, Octal bases
Enter fullscreen mode Exit fullscreen mode

js

3. String replaceAll
If we want to replace all instances of a substring in string than this new method replaceAll is very useful.

const s = "You are reading JavaScript 2021 new updates.";
console.log(s.replaceAll("JavaScript", "ECMAScript"));
// output : You are reading ECMAScript 2021 new updates.
Enter fullscreen mode Exit fullscreen mode

4. Promise.any
The Promise.any() method returns a promise that will resolve as soon as one of the promises is resolved. It is opposite of Promise.all() method which waits for all promises to resolve before it resolves.

Wait, what will happen when all of the promises are rejected, Yes you get that, the method will throw an AggregateError exception with the rejection reason. We have to put the code inside try-catch block.

const promiseOne = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 1000);
});
const promiseTwo = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 2000);
});
const promiseThree = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 3000);
});
try {
  const first = await Promise.any([
    promiseOne, promiseTwo, promiseThree
  ]);
  // If any of the promises was satisfied.
} catch (error) {
  console.log(error);
  // AggregateError: If all promises were rejected
}
Enter fullscreen mode Exit fullscreen mode

5. Private class methods

Private method have scope inside the class only so outside the class they are not accessible, see this example

Previous :

class Me{
  showMe() {
    console.log("I am a programmer")
  }
  #notShowMe() {
    console.log("Hidden information")
  }
}
const me = new Me()
me.showMe()
me.notShowMe()
//error
Enter fullscreen mode Exit fullscreen mode

This code will throw an error that gfg.notShowMe is not a function. This is because #notShowMe() is now a private method inside the class GfG and can only be access via a public method inside the class.

New :

class Me {
  showMe() {
    console.log("I am a programmer");
  }
  #notShowMe() {
    console.log("Hidden information");
  }
  showAll() {
    this.showMe()
    this.#notShowMe();
  }
}
const me = new Me();
me.showAll();
//I am a programmer
//Hidden information
Enter fullscreen mode Exit fullscreen mode

Now we create a new public method called showAll() inside the class Me from this public method we can access the private method #notShowMe() and since our new method is a public we get this output.

6. Private Getters and setters
Just like private methods, now we can make getters and setters as private so that they can only accessed inside class or by instance created.

class Me {
  get #Name() {
    return "Animesh"
  }
  get viewName() {
    return this.#Name
  }
}
let name = new Me();
console.log(name.viewName)
// Output: Animesh
Enter fullscreen mode Exit fullscreen mode

Conclusion
JavaScript is one of the most popular language and these frequent updates of new features make it more awesome and development friendly. So Welcome all these new features..

Read
C++ Removed features

Connect
LinkedIn
Twitter

Updates Rocks! 😊

Oldest comments (25)

Collapse
 
joelnwalkley profile image
Joel N. Walkley

When this release is available, how do we update in order to make use of these really helpful features? Will it just be part of my IDE updates?

Collapse
 
animeshmaru profile image
Animesh

Hey Joel,
JavaScript not requires update as it works in browser, only your browser should support the new ECMA version features. Make sure you works on Chrome browser.

Collapse
 
devoskar profile image
Oskar Pietrucha

You just update your code and hope that your clients upgrade their browsers as well :) Cheers mate!

Collapse
 
ouzkagan profile image
ouzkagan

why are they making it more complicated?

Collapse
 
animeshmaru profile image
Animesh

Hey Ouzkagan,
Some features like Numeric Separators are most awaiting features in JS, these make code more readable.

Collapse
 
khejit68 profile image
khejit68

I too think that things like x &&= 10 could appear more convoluted for other programmers who look at the code. I would just not use the feature to keep things straightforward.

Collapse
 
robertds07 profile image
Robert Damaceno

If you don't understand the purpose of that and try use, it's really complicated, but after some days you will see that feats will optimize your coding time

Collapse
 
andreaskol profile image
Andreas • Edited

A solution where there was no problem. Just because you can add a feature doesn't mean you should!

Collapse
 
juniordevforlife profile image
Jason F

JavaScript is and will be backwards compatible. If you don't have a use for the new features, the old ways will still be present. The new tools are available if you find a use case.

Collapse
 
aemidev profile image
Guillaume C.

In a not-so-near future, it could be used and useful for minifiy process improvements !

Collapse
 
caf3 profile image
Tomas Caetano

Kkkkkkkkkk I thought the same. But that X ??= 10 is really cool.

Collapse
 
cenacr007_harsh profile image
KUMAR HARSH

Try putting the code in backticks, it makes it more readable.

Collapse
 
animeshmaru profile image
Animesh

Updated!

Collapse
 
dastasoft profile image
dastasoft

I have mixed feelings with the nomenclature of the private class methods, I mean the feature is great I used it in TS but I would rather write really private than a symbol :D

Collapse
 
animeshmaru profile image
Animesh

Ya, it has more clear meaning.

Collapse
 
davidshoes profile image
David Shoes & Co

Excellent write up. Thank you!

Collapse
 
animeshmaru profile image
Animesh

Welcome David 😊

Collapse
 
irochkaz profile image
Iryna Zaletko • Edited

Error here, it should be // Output: x = 1; Output: a = 10 prntscr.com/17suwls

Or
let x = 1;
if(x){
x = 10;
}

Collapse
 
animeshmaru profile image
Animesh

Corrected, sorry for mistake. Thank u 😀

Collapse
 
baenencalin profile image
Calin Baenen

Can you have public counterparts to private properties?
E.g.

class MyClass {
  #priv;
  get priv() {
    return this.priv;
  }
}
Enter fullscreen mode Exit fullscreen mode

Or is JS to primitive to handle it keeping its logic simple?

Collapse
 
animeshmaru profile image
Animesh

Yes, we can have public getter function to get a private properties.

Collapse
 
baenencalin profile image
Calin Baenen

I'm specifically referring to them sharing the same name, so the getter can let you do .priv without just giving you (direct) access to .priv.

Thread Thread
 
animeshmaru profile image
Animesh • Edited

Ok, your example is correct. In new update now we can make getter function also private so that it can only be accessed inside the class, but priv in your ex can be get from outside.

Collapse
 
lilithkarapetyan profile image
Lilit Karapetyan

Nice post and nice features! It's funny how these simple features may make out lives that much easier. Each week there are at least 2-3 cases when I use3 the x = x || 10 syntaxes, and I think that the new operator will make the code more readable. We had x += 10, x*=10, and why not to have x ||= 10 :D. That's interesting how workarounds people used for writing shorter code are becoming a part of the language specification. I wonder how people coming from other languages will react to these operators :) Not speaking about the res, because there are helpful, too!

Collapse
 
animeshmaru profile image
Animesh


5 mb storage 1956
But nowadays things completely changed..
Same going with these programming languages. 🙂