The Latest Features of ECMAScript 2021

Are you ready for the latest and greatest features of ECMAScript 2021? If you're a JavaScript or TypeScript developer, you're in for a treat! This year's update brings some exciting new features that will make your coding experience even better.

String.prototype.replaceAll()

Have you ever needed to replace all occurrences of a substring in a string? In the past, you might have used a regular expression or a loop to accomplish this. But with ECMAScript 2021, you can now use the replaceAll() method on a string to replace all occurrences of a substring with another string.

const str = 'hello world';
const newStr = str.replaceAll('l', 'x');
console.log(newStr); // 'hexxo worxd'

This method is much more concise and easier to read than using a regular expression or a loop. Plus, it's faster and more efficient!

Logical Assignment Operators

Do you find yourself writing code like this?

if (x === undefined) {
  x = 42;
}

With ECMAScript 2021, you can now use logical assignment operators to simplify this code.

x ??= 42;

The ??= operator assigns the value on the right-hand side to the variable on the left-hand side only if the variable is null or undefined. This code is much more concise and easier to read than the previous example.

You can also use the ||= and &&= operators to assign a value to a variable only if it is falsy or truthy, respectively.

Numeric Separators

Have you ever struggled to read a large number in your code? With ECMAScript 2021, you can now use numeric separators to make your code more readable.

const billion = 1_000_000_000;
const trillion = 1_000_000_000_000;

The underscores in these numbers are ignored by the JavaScript engine, so they don't affect the value of the number. But they make the number much easier to read!

Promise.any()

Have you ever needed to wait for the first promise in an array to resolve or reject? With ECMAScript 2021, you can now use the Promise.any() method to accomplish this.

const promises = [
  fetch('/api/data1'),
  fetch('/api/data2'),
  fetch('/api/data3')
];

Promise.any(promises)
  .then(response => console.log(response))
  .catch(error => console.error(error));

This method returns a promise that resolves with the value of the first promise in the array that resolves. If all promises in the array reject, the returned promise rejects with an AggregateError that contains all the rejection reasons.

WeakRefs

Have you ever needed to keep track of an object without preventing it from being garbage collected? With ECMAScript 2021, you can now use weak references to accomplish this.

const obj = { foo: 'bar' };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()); // { foo: 'bar' }

obj = null;

console.log(weakRef.deref()); // null

A weak reference is a reference to an object that does not prevent the object from being garbage collected. If the object is garbage collected, the weak reference will return null when you call the deref() method.

Conclusion

ECMAScript 2021 brings some exciting new features to JavaScript and TypeScript developers. From the replaceAll() method to logical assignment operators to numeric separators to Promise.any() to weak references, there's something for everyone in this update.

So what are you waiting for? Start using these new features in your code today and take your coding experience to the next level!

Editor Recommended Sites