In this tutorial, we will learn about Double Question Mark in JavaScript. In JavaScript, the double question mark (??) is also called “nullish coalescing” operator. It is used to provide a default value for a variable if its current value is null or undefined.
In JavaScript, the double question mark (??) is a logical operator that simplifies the handling of null or undefined values. It works by taking two values and returning the right-hand value if the left-hand value is undefined or null. Otherwise, it returns the value of the left-hand operand.
You can think of the double question mark as a specialized variant of the logical OR (||) operator. However, it distinguishes itself by specifically targeting null or undefined values. When using the double question mark, any false value on the left-hand side will cause the right-hand side to be returned.
It’s important to note that the operator precedence of the “nullish coalescing” operator is relatively low. It ranks fifth among other operators, higher than the ternary operator but lower than the logical OR operator.
Related Post: JavaScript typeof Operator
Syntax:
const defaultValue = valueToCheck ?? defaultValueIfNullish;valueToCheckis the expression or variable whose value you want to evaluate.defaultValueIfNullishis the value that will be assigned todefaultValueifvalueToCheckis null or undefined.
Different Examples of Double Question Mark in JavaScript
Example:
const x = null;
const y = 5;
const result1 = x ?? 'Default'; // result1 is 'Default' because x is null
const result2 = y ?? 10; // result2 is 5 because y is not null or undefined
console.log(result1);
console.log(result2);
Output:
Default
5In the first example, since x is null, the nullish coalescing operator returns the default value 'Default'.
In the second example, since y is not null or undefined, the nullish coalescing operator returns the value of y, which is 5.
Example:
const value1 = 0;
const value2 = '';
const result1 = value1 || 'Default';
const result2 = value2 || 'Default';
const result3 = value1 ?? 'Default';
const result4 = value2 ?? 'Default';
console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);
Output:
Default
Default
0
' ' In the example above, result1 and result2 use the logical OR operator (||) and return the default value because the initial values are considered falsy. result3 and result4 use the nullish coalescing operator (??) and return the initial values since they are not null or undefined.
What is Nullish Coalescing (??) Operator in JavaScript?
JavaScript introduced the nullish coalescing operator (??) to address the need for a concise way to handle null or undefined values. Prior to its introduction, developers commonly used the logical OR operator (||) to provide default values. However, the logical OR operator considers any falsy value, including empty strings, zero, and false, as well as null and undefined.
The nullish coalescing operator specifically focuses on null and undefined values. It allows developers to provide a default value only when the evaluated expression is strictly null or undefined, disregarding other falsy values. This distinction is important because there are cases where you may want to differentiate between null or undefined and other falsy values.
By having the nullish coalescing operator, JavaScript developers can write more precise and readable code when setting default values or handling optional variables. It simplifies the syntax and eliminates the need for additional checks or conditional statements.
Example:
const name = null;
const defaultName = 'DeveloperHelps';
const displayName = name ?? defaultName;
console.log(displayName);Output:
DeveloperHelpsNullish Coalescing Operator Short-Circuited
The nullish coalescing operator (??) in JavaScript offers a short-circuited behavior, reducing unnecessary evaluations, and it promotes a more active voice in programming. It provides a concise and direct way to handle null or undefined values.
The nullish coalescing operator works by evaluating the left-hand side expression and returning it if it is not null or undefined. If the left-hand side is null or undefined, it short-circuits the evaluation and immediately returns the right-hand side value.
const x = null;
const y = 'Hello';
const result = x ?? y;
console.log(result); // Output: 'Hello'Output:
HelloIn this example, the evaluation stops at the nullish value (x) and proceeds no further. Since x is null, the operator immediately returns the value of y, resulting in 'Hello' being assigned to result.
Chaining with the AND or OR operator
In JavaScript, the double question mark operator (??) can be effectively used in conjunction with the logical AND (&&) or logical OR (||) operators to create powerful and concise expressions. This approach promotes an active programming style and enhances code readability.
When chaining the double question mark operator with the logical AND (&&), the expression returns the right-hand value if both the left-hand value and the right-hand value are not null or undefined. Otherwise, it returns null or undefined. Here’s an example:
const x = null;
const y = 'Hello';
const z = 'World';
const result = x && y ?? z;
console.log(result);Output:
HelloIn this example, x is null, so the expression x && y evaluates to null. The double question mark operator then checks if the result is null or undefined. Since it is, the right-hand value z is returned, resulting in 'World' being assigned to result.
On the other hand, when using the double question mark operator with the logical OR (||), the expression returns the left-hand value if it is not null or undefined. Otherwise, it returns the right-hand value. Here’s an example:
const x = null;
const y = 'Hello';
const z = 'World';
const result = x ?? y || z;
console.log(result);Output:
HelloIn this example, x is null, so the double question mark operator returns the right-hand value y, resulting in 'Hello'. The logical OR operator then evaluates the result and returns it since it is a truthy value. Therefore, 'Hello' is assigned to result.
By leveraging the chaining capabilities of the double question mark operator with the logical AND or logical OR operators, JavaScript developers can construct expressive and concise expressions that handle null or undefined values efficiently. This approach actively enhances code clarity and promotes a more proactive programming style.
Conclusion
In summary, the double question mark (??) in JavaScript offers a simple and concise way to handle null or undefined values, allowing developers to provide default values when necessary. It complements the logical OR operator but with a more targeted focus on nullish values.
