JavaScript Nullish Coalescing Operator

The double question mark (??) denotes the nullish coalescing operator introduced in ES6. When its left-hand side operand is undefined or null, the nullish coalescing (??) operator returns its right-hand side operand. In all other cases, the logical operator returns its left-hand side operand.

The nullish coalescing operator is the logical operator to get the right side operand for display output by default.

Syntax

The following syntax shows the basic operation of the nullish coalescing operator. There are two values that the nullish coalescing operator will accept:

If the first value (second_value) is null or undefined, the nullish coalescing operator returns the second value (second_value).

The old method for the nullish coalescing operator

The following block corresponds to the nullish coalescing operator:

Any undefined or null value is considered to have a nullish value.

How to operate the nullish coalescing operator

The nullish coalescing operator (??) is used in the example below to return the string "Javatpoint" because the first value is null:

The following syntax shows the output

const mark = undefined ?? 80;
console.log(mark);

Examples

The following examples show the nullish coalescing operator in JavaScript. The multiple values display using the logical and comparison operator.

Example 1: The following example shows the basic use of the nullish coalescing operator in JavaScript. We can see the string and numerical data to compare with the null data.

Output

The following image shows two values as an output of the operator.

Example 2: The following example shows the use of the nullish coalescing operator with a variable in JavaScript.

Output

The following image shows four values as an output of the operator.

Example 3: The following example shows the use of the nullish coalescing operator with a function in JavaScript. We can see all the function's data in the console tab for different data of the functions attribute.

Output

The following image shows three values as an output of the operator.

Example 4: The following example shows the use of the nullish coalescing operator with a constant variable in JavaScript. We can use a constant function as a function with the value.

Output

The following image shows three values as an output of the operator.

Why use the nullish coalescing operator

• The logical OR operator (||) is frequently used to set a variable's default value. For instance:

• The count variable of the syntax has no definition and is forced to be false. The outcome is two as a result.
• However, the logical OR operator (||) might be perplexing if you accept 0 or empty strings "" as valid values, as in the following syntax:

• We might be surprised that the outcome is 2, not 0.
• We can avoid this pitfall with the aid of the nullish coalescing operator. Only when the first value is either null or undefined does it return the second one.

Short-circuiting occurs in the nullish coalescing operator.

• The nullish coalescing operator works like the logical AND and OR operators. It does not consider the second value if the first operand is not undefined or null.
• Consider the following demonstration:

• The initial value of the argument in this demonstration is 21. the value is not null or undefined.
• The operator (??)does not examine the second argument that outputs the word "Hello" to the alert box.
• The first argument is null; the illustration examines the second one:

Examples

The following examples show the nullish coalescing operator for short circuits in javascript. The multiple values display using the logical operator in the console, alert box, and div tag.

Example 1: The following example shows the use of the nullish coalescing operator with the variable in JavaScript.

Output

The following image shows various values as an output of the operator.

Output1

Example 2: The following example shows the Short-circuiting occurs in the nullish coalescing operator in JavaScript. We can see the javascript functionality with the null, not null, operand.

Output

The following images show the web page and console value using the operator.

Output1

The image shows the first operand is not null.

Output2

The image shows the first operand is null in the console.

Using the AND or OR operator to chain

• Directly combining the logical AND or OR operator with the nullish coalescing operator. In the following syntax, we will get in a SyntaxError:

• However, you can prevent this mistake by explicitly stating the operator precedences by enclosing the statement to the left of the?? Operator in parentheses:

Example

The following example shows that Short-circuiting occurs in the nullish coalescing operator in JavaScript. We can see the javascript functionality with the null, not null, operand.

Output

The following images show the value on the web page of the operator.

Summary

When given two values, the nullish coalescing operator (??) gives the second item if the first value is null or undefined. The logical AND or OR operator cannot be combined directly with the javascriptnullish coalescing operator because it is short-circuited.