Understanding the Double Question Mark (??) or Nullish Coalescing Operator in JavaScript and TypeScript

In the world of programming, you might often encounter unfamiliar symbols or operators that leave you scratching your head.

One such symbol that might have caught your eye is the double question mark (??). If you’re wondering what this mysterious operator does and how it can simplify your code, you’re in the right place.

In this article, we will delve into the world of the nullish coalescing operator and explore its significance in JavaScript and TypeScript.

What is the Nullish Coalescing Operator (??)?

The double question marks (??) are formally known as the nullish coalescing operators. These operators provide a convenient way to handle default values in your code when dealing with variables that might be null or undefined.

In simple terms, the nullish coalescing operator allows you to set a default value on the right side of the operator if the value on the left side is null or undefined.

Let’s illustrate this concept with an example:

let random;
const color = random ?? 'red';

In this code snippet, we have two variables: random and color. Since random is undefined, the color variable is assigned the default value of “red.”

Difference Between Logical OR (||) and Nullish Coalescing Operator (??)

Before diving deeper into the nullish coalescing operator, it’s essential to understand how it differs from another commonly used operator in JavaScript: the logical OR (||).

Consider the following code using the logical OR operator:

let random;
const color = random || 'red';

In this scenario, if random is falsy (i.e., evaluates to false when converted to a boolean), the color variable will be assigned the default value of “red.”

Here’s where the key difference lies:

The logical OR operator uses the default value if the initial expression is considered falsy. Common falsy values in JavaScript include false, 0, null, and undefined. These values, when converted to a boolean, always result in false.

console.log(Boolean(false));      // false

console.log(Boolean(0));          // false

console.log(Boolean(null));       // false

console.log(Boolean(undefined));  // false

In contrast, the nullish coalescing operator (??) uses the default value only when the initial expression is specifically null or undefined. Any other falsy values will not trigger the use of the default value.

console.log(0 ?? 'default');         // 0

console.log(false ?? 'default');    // false

console.log(null ?? 'default');      // default

console.log(undefined ?? 'default'); // default

The nullish coalescing operator was introduced to address situations where developers using the logical OR operator unintentionally triggered the default value due to a lack of clarity regarding all the falsy values in JavaScript.

Curious about the power of the double exclamation mark in JavaScript? Unravel its secrets and discover its versatility in our comprehensive exploration!

Not Created By TypeScript

It’s worth noting that the nullish coalescing operator was not introduced by TypeScript but rather became available in TypeScript starting from version 3.7. TypeScript, a popular statically-typed superset of JavaScript, compiles code into JavaScript, and its features are influenced by evolving JavaScript standards.

JavaScript itself evolves through a series of standards defined by ECMA (European Computer Manufacturers Association). These standards are collectively known as ECMAScript. JavaScript is an implementation of these ECMA standards.

The TC39 committee, a technical committee within ECMA, is responsible for maintaining and evolving the JavaScript language.

The introduction of the nullish coalescing operator was a proposal put forth by TC39 in December of 2019 and was subsequently published the following year.

As JavaScript continues to evolve, developers need to stay updated with the latest features and operators like the nullish coalescing operator to write more efficient and robust code.

Conclusion

In summary, the nullish coalescing operator (??) is a valuable addition to JavaScript and TypeScript that simplifies the handling of default values in cases where variables may be null or undefined. Its distinction from the logical OR operator (||) lies in its precise treatment of null and undefined values, ensuring that default values are used only when necessary.

if you Want to dive deeper into JavaScript conventions? Explore the distinctions between Camel case and the Pascal case in this insightful article.

Understanding these nuances can lead to more reliable and less error-prone code. As JavaScript and TypeScript continue to evolve, keeping abreast of new features like the nullish coalescing operator is crucial for modern web development. So, the next time you encounter those double question marks in your code, you’ll know just how to make sense of them.