JavaScript ES12 features with code examples (ES2021)
Hey there 👋! Jonathan here, today I want to take a look over some new cool JavaScript features in ES12, using really simple code examples. This way, you will quickly understand and be able to use them in your current project.
But first things first. Let’s start from the beginning: ES12…ES2021…ECMAScript 2021…ESWHAAAT? What’s the difference?
Well, in a nutshell, ES2021 is the version of ECMAScript corresponding to year 2021, and it is also called ES12, because is the 12th version. By the other hand, ECMAScript is a standard for scripting languages, and JavaScript is the most popular implementation of it, used across web browsers.
That being said, let’s go folks!
Disclaimer: even if it’s not mandatory, I strongly recommend having a basic knowledge about JavaScript to fully understand this article. Also, you may need a compatible web browser to try some of those new features.
1. String.protype.replaceAll() Method
This feature allows you to replace all occurrences of a word or pattern in a string with a given word or function.
const message = "The user email has been changed. Your new email is ready to use."console.log(message.replaceAll("email", "phone number"));// => "The user phone number has been changed. Your new phone number is ready to use."
2. Numeric Separators
With Numeric Separators you’ll be able to add a separator between digits of a number, making it more readable. Syntactic sugar!
const billion = 1_000_000_000;
console.log(billion);// => 1000000000
3. Promise.any() Method
This method notifies you as soon as one of your promises has been fulfilled, even if some of them has been rejected before. If all of the given promises have been rejected, then you will get an AggregateError.
const promiseOne = Promise.reject(0);
const promiseTwo = new Promise((resolve) => setTimeout(resolve, 100, 'I arrived first'));
const promiseThree = new Promise((resolve) => setTimeout(resolve, 500, 'I arrived later'));const promises = [promiseOne, promiseTwo, promiseThree];Promise.any(promises).then((value) => console.log(value));// => "I arrived first"
4. Logical Assignment Operators
Logical OR assignment (||=)
This operator assigns a given value if the target is falsy.
const user = { name: 'Jonathan', lastName: '' };user.name ||= 'No name provided';
console.log(user.name);// => "Jonathan"user.lastName ||= 'No last name provided';
console.log(user.lastName);// => "No last name provided"
Logical AND assignment (&&=)
This operator assigns a given value if the target is truthy.
const user = { name: 'Jonathan', lastName: '' };user.name &&= 'No name provided';
console.log(user.name);// => "No name provided"user.lastName &&= 'No last name provided';
console.log(user.lastName);// => ""
5. Private class fields and methods
Hash symbol (#) allows you to mark class fields and methods as private, disallowing you to access them outside the class.
class User {
#privateField = 'I am private and only accesible within my class'; #privateMethod() {
return this.#privateField;
}
publicMethod() {
return this.#privateMethod();
}}const user = new User();
console.log(user.#privateField);
console.log(user.#privateMethod());
console.log(user.publicMethod());// => ERROR
// => ERROR
// => "I am private and only accesible within my class"
6. WeakRef
This is a really advanced feature, so I’ve decided writing an entire dedicated post in the future, this way I can explain it as it deserves. Stay tuned!
Conclusion
This article has covered some of the new features in JavaScript ES12, so I hope it has been useful for you and you have even learnt something new today. Don’t hesitate to share your feedback.
That’s pretty much all folks, see u soon 😁!
