What is a "null coalescing" operator in JavaScript?

Javascript Web Development Front End Technology

The null coalescing operator (??) is a binary operator introduced in JavaScript that is used to return the first operand if it exists and is not null or undefined; otherwise, it returns the second operand.

Here is an example of how to use the null coalescing operator −

const x = null;
const y = 'Hello';
const result = x ?? y; // 'Hello'

In this example, the value of x is null, so y is returned instead. If x had been any other value that is not null or undefined, that value would have been returned instead.

You can also chain the null coalescing operator to provide multiple fallback values −

const a = null;
const b = undefined;
const c = 'Hello';
const result = a ?? b ?? c; // 'Hello'

In this example, if a is null or undefined, the operator will move on to the next operand (b). If b is null or undefined, the operator will return the final operand (c).

A null coalescing operator is a useful tool for providing default values and handling null or undefined values in your code.

Syntax

Following is the syntax of the null coalescing operator (??) in JavaScript −

operand1 ?? operand2

Here, operand1 and operand2 are two operands. The operator (??) returns operand1 if it exists and is not null or undefined. Otherwise, it returns operand2.

Example

Let’s see an example where we create a constant and assign it to the string "Hello" separate it with the null coalescing operator, and then provide a string "Hello World". The value on the left-hand side is not null, so it will be assigned to the constant.

Create another constant, value2, and assign it to null, then separate it with the null coalescing operator and then provide a string "Hello World", since the value of the lefthand side is null and the right-hand side is assigned to the constant, then log both values.

<html>
<body>
   <h2>Understanding "null coalescing" operator in  JavaScript</h2>
   <script>
      
      // Using null coalescing operator to initialize variables.
      const value1 = "Hello" ?? "Hello World";
      const value2 = null ?? "Hello World";
      
      // Printing the values.
      document.write(value1 + "<br>");
      document.write(value2 + "<br>");
   </script>
</body>

The difference between a null coalescing operator and the traditional operator

In the past, the null coalescing operator in JavaScript didn't exist, so it is recommended to use the or operator, which works similarly, but the difference between them is that the or operator doesn't execute the left-hand side statement if the value is false, null, or undefined. But the null coalescing operator executes the left-hand side statement to determine whether the value is false.

Example

Let’s create two constants: the first is num1 and set it to the number 0, and the second is num2 and set it to the number 1. Then create two expressions, one using the null coalescing operator and the other using the or operator, with num1 on the left and num2 on the right-hand side, and log the value of both expressions.

<html>
<body>
   <h3>Understanding "null coalescing" operator in JavaScript</h3>
   <div id= "result"></div>
   <script>
      // Creating variables normally
      const num1 = 0;
      const num2 = 1;
      
      // Initializing variables using null coalescing operator
      const value1 = num1 || num2;
      const value2 = num1 ?? num2;
      document.write("0 || 1 = " + value1 + "<br>");
      document.write("0 ?? 1 = " + value2 + "<br>");
   </script>
</body>
</html>

The null coalescing operator is a special case of the or operator that executes the first statement, whether it is true or false. The first statement should not be null or undefined. It only executes the right-hand side statement if the value of the left-hand side is null or undefined.