4 New ES2021 (ES12) Features JavaScript Developers Need to Know
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 ( || = )
- 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 ( && = )
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 ( ?? = )
- 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 JS are floats).
3. Promise.any() + Aggregator
Promise.any() accept an array of Promise objects and returns the first promise object to be fulfilled or resolved.
- 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 replaces a substring in a string that occurs once or more.
Unlike the String.replace() method that only changes the first substring it finds in the string with the value you are looking to replace
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.
