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.
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
New :
let x = 1;
x &&= 10
// Output: x = 10
OR & Equals (||=)
It assigns when the value is falsy.
Previous :
let x = 0;
x = x || 10;
// Output: x = 10
New :
let x = 0;
x ||= 10
// Output: x = 10
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;
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
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.
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
}
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
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
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
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
Updates Rocks! 😊
Top comments (25)
why are they making it more complicated?
Hey Ouzkagan,
Some features like Numeric Separators are most awaiting features in JS, these make code more readable.
I too think that things like
x &&= 10could appear more convoluted for other programmers who look at the code. I would just not use the feature to keep things straightforward.A solution where there was no problem. Just because you can add a feature doesn't mean you should!
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
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.
In a not-so-near future, it could be used and useful for minifiy process improvements !
Kkkkkkkkkk I thought the same. But that X ??= 10 is really cool.
Can you have public counterparts to private properties?
E.g.
Or is JS
to primitive to handle itkeeping its logic simple?Yes, we can have public getter function to get a private properties.
I'm specifically referring to them sharing the same name, so the getter can let you do
.privwithout just giving you (direct) access to.priv.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.
Try putting the code in
backticks, it makes it more readable.Updated!
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!
5 mb storage 1956
But nowadays things completely changed..
Same going with these programming languages. 🙂
Excellent write up. Thank you!
Welcome David 😊
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?
You just update your code and hope that your clients upgrade their browsers as well :) Cheers mate!
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.
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
Ya, it has more clear meaning.
Error here, it should be // Output: x = 1; Output: a = 10 prntscr.com/17suwls
Or
let x = 1;
if(x){
x = 10;
}
Corrected, sorry for mistake. Thank u 😀