1. Optional Chaining

As developers, we frequently face scenarios where we need to access nested properties or methods of an object, often unsure if they exist. Previously, we had to conduct cumbersome checks to avoid errors or undefined property access. Fortunately, ES12 introduces the Optional Chaining feature, simplifying this process.

For example, consider the following object:

const user = {

name: 'Jane',

age: 25,

address: {

city: 'Techville',

country: 'Codingland',

},

};

With optional chaining, accessing nested properties becomes safer, even if some properties are missing:

const countryName = user.address?.country;

If either address or country is absent, the expression will yield undefined, avoiding potential errors. This feature greatly enhances code readability and reduces unnecessary checks.

2. Nullish Coalescing Operator

The Nullish Coalescing Operator (??), introduced in ES11, revolutionized the handling of default values. ES12 enhances this operator further.

Consider a function designed to take an argument and provide a default value if the argument is null or undefined:

function greetUser(name) {

const userName = name ?? 'Guest';

console.log(Hello, ${userName}!);

}

While effective, this approach doesn't account for cases where name might be an empty string. With ES12, we can combine the Nullish Coalescing Operator with optional chaining:

function greetUser(name) {

const userName = name ?? 'Guest';

const validUserName = userName || 'Guest';

console.log(Hello, ${validUserName}!);

}

Now, if name is null, undefined, or an empty string, it defaults to 'Guest', eliminating the need for extra conditionals.

3. Logical Assignment Operators

Managing variable assignments can be tedious, especially when applying operations. ES12 introduces Logical Assignment Operators, which merge assignment and logical operations into one concise statement.

Here's an example where we want to add a number to a variable count only if that number is truthy:

let count = 10;

const numberToAdd = 5;

if (numberToAdd) {

count += numberToAdd;

}

With logical assignment operators, we can simplify this:

let count = 10;

const numberToAdd = 5;

count &&= numberToAdd;

The logical AND (&&=) operator assigns the value only if the left-hand side (count) is truthy. This feature promotes cleaner, more concise code.

4. String.prototype.replaceAll()

ES12 enhances string manipulation by adding String.prototype.replaceAll(). Previously, replacing all instances of a substring required complex regular expressions or a combination of split() and join(). The new method streamlines this process, making it more intuitive.

For example:

const message = "Hello, world! Hello, JavaScript!";

const newMessage = message.replaceAll('Hello', 'Hi');

console.log(newMessage);

The output will be:

Hi, world! Hi, JavaScript!

The replaceAll() method simplifies substring replacement, improving code readability and maintainability.

5. Promise.any()

When working with multiple Promises, we often want to resolve based on the first one that fulfills. Previously, custom solutions were necessary, but ES12 introduces the Promise.any() method for this purpose.

Consider the following Promises:

const promise1 = new Promise((resolve) => setTimeout(resolve, 1000));

const promise2 = new Promise((resolve) => setTimeout(resolve, 2000));

const promise3 = new Promise((_, reject) => setTimeout(reject, 1500, 'Oops!'));

Using Promise.any(), we can get the result of the first fulfilled Promise:

Promise.any([promise1, promise2, promise3])

.then((value) => console.log(value))

.catch((error) => console.error(error));

In this instance, the output will be 'Oops!', as it resolves with the first fulfilled Promise, which is promise3. This feature simplifies our code and provides a more elegant way to manage asynchronous operations.