Published on Sunday, 13 June 2021
These new Javascript features have reached the final stage of the Ecmascript proposal and are included in the latest draft. It will be published between June 2021 and July 2021. For now, they can only be used with Babel.
1. Logical Assignment Operators
This feature combines mathematical assignment operators with the most often used Logical operators like so (??=, &&=, ||=). It provides a neatly short and concise expressive style. This concept confused me a bit at first, refactoring it from an IF statement to a Logical Assignment helped me understand how it works.
Logical OR Assignment ( || = )
1let person = {name: 'Mary' , job:'specialist', sex: '' } 2 3person.name ||= 'user' 4console.log(person.name) // Mary 5 6person.sex ||= 'not specified' 7console.log(person.name) // not specified 8 9 10//popular way using if statement 11if(!person.name) person.name = 'user' 12if(!person.sex) person.sex = 'not specified' 13 14// or 15person.name = person.name || 'user' 16person.sex = person.sex || 'not specified' 17
Logical OR operation does a short circuit evaluation.
If the first operand is truthy, it returns the value. Else it returns the second operand.
In the first example person.name is truthy so it was returned, in the second person.sex is empty therefore falsey so it returned not specified.
Logical AND Assignment ( && = )
1let person = {name: 'Mary' , job:'specialist', sex: 'female' }
2
3const changeJob =() => 'hustler';
4
5person.job &&= changeJob()
6console.log(person.job) // 'hustler'
7
8
9//popular way using if statement
10if(person.job) changeJob()
11
12// or
13person.name = person.name && changeJob()
14
15
If the first operand is truthy, changeJob() is called. Else if it's falsey, it stops the execution and returns person.job value.
Logical Nullish Assignment ( ?? = )
1let person = {name: 'Mary' , job:'specialist', sex: 'female' } 2 3person.sex ??= 'not specified' 4console.log(person.sex) // female 5 6person.location ??= 'lagos' 7console.log(person.location) // lagos 8 9//popular way using if statement 10if(person.location == null || person.location == undefined) { 11 person.location = 'lagos' 12} 13 14
nullish operator will only assign a value to a variable if it is null or undefined.
In this case person.location == null and was assigned lagos value.
2. Numeric Separators
This feature helps large numbers in javascript become easier to read and understand.
it uses underscore( _ ) to improve readability both in integers and floating points (numbers in avascript are floats).
1//before 21000000 // squints eye, counts Zeros carefully 3 4// now 51_000_000 // Oh it's a million 6 7let price = 23_000 // $23,000 8 price = 230_00 // $230. zeros after underscore is for cent 9 price = 2340_00 // $2,340 10 price = 1213_0500 // $1213.05 11 12
3. Promise.any() + Aggregator
Promise.any() accept an array of Promise objects and returns the first promise object to be fulfilled or resolved.
1const promise1 = new Promise((resolve) => setTimeout(() => resolve('number 1'), 30)
2const promise2 = new Promise((resolve) => setTimeout(() => resolve('number 2'), 20)
3const promise3 = new Promise((resolve) => setTimeout(() => resolve('number 3'), 10)
4
5 try {
6 const first = await Promise.any([ promise1, promise2, promise3 ]);
7 console.log(first) // number 3
8 // any promise that resolves first in this case, promise3.
9
10} catch (error) {
11 // All of the promises were rejected.
12}
13
AggregateError is an object that holds rejection reasons for all promises that were rejected. In the above example error is an AggregateError
Promise.any() will throw an AggregateError if all the promises were rejected.
4. String.prototype.replaceAll
The replaceAll() method gives developers a straightforward way of replacing a substring in a string that occurs once or more.
Unlike the String.replace() method that replaces the only first substring it finds in the string.
1let str = 'music is life, music feeds the soul'; 2 3str.replaceAll('music', 'food'); 4 5console.log(str); // 'food is life, food feeds the soul' 6 7
Conclusion
To get started using ES2021 features in your code, set up your project with Babel compiler, the packages have already been included in @babel/preset-env
Discuss on Medium
Recommended Reads