The nullish coalescing operator (??) was added in ES6 to address situations where the left-hand side operand is either undefined or null. In such cases, the operator will yield the value of the right-hand side operand. Conversely, if the left-hand side operand has any other value, it will be returned by the operator.
The nullish coalescing operator serves as a logical operator that retrieves the default right-side operand for displaying output.
Syntax
The example below demonstrates the fundamental usage of the nullish coalescing operator. Two types of values are permissible for the nullish coalescing operator:
First_value ?? second_value
If the first value (secondvalue) is null or undefined, the nullish coalescing operator returns the second value (secondvalue).
The old method for the nullish coalescing operator
The code snippet below demonstrates the usage of the nullish coalescing operator:
const result_var = First_value;
if(result_var === null || result_var === undefined) {
result = second_value;
}
A value that is either undefined or null is classified as having a nullish value.
How to operate the nullish coalescing operator
In the provided example, the nullish coalescing operator (??) is utilized to yield the string "Example" as the outcome, given that the initial value is null:
const website = null ?? 'Example';
console.log(website); // output : 'Example'
The following syntax shows the output
const mark = undefined ?? 80;
console.log(mark);
Examples
The nullish coalescing operator in JavaScript can be demonstrated through the following instances. These examples illustrate the use of the logical AND comparison operator to display multiple values.
An illustration is provided below to demonstrate the fundamental application of the nullish coalescing operator in JavaScript. It showcases comparisons between string and numerical data against null values.
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<p id = "retrive"></p>
<p id = "retrive1"></p>
<p id = "retrive2"></p>
<script>
const website = null ?? 'Example';
console.log(website);
const Data_Tutorial = undefined ?? 28;
const Tutorial = null ?? undefined;
document.getElementById('retrive').innerHTML = website;
document.getElementById('retrive1').innerHTML = Data_Tutorial;
document.getElementById('retrive2').innerHTML = Tutorial;
</script>
</body>
</html>
Output
The image displayed illustrates a pair of values generated by the operator.
Illustrative Example 2: Below is a demonstration illustrating the application of the nullish coalescing operator with a variable in the JavaScript programming language.
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<p id = "retrive"></p>
<p id = "retrive1"></p>
<p id = "retrive2"></p>
<p id = "retrive3"></p>
<script>
var first_val = null;
var secon_val = undefined;
var third_val = 'Example';
var fourth_val = 82;
const website = first_val ?? third_val;
console.log(website);
const Data_Tutorial = secon_val ?? fourth_val ;
const Tutorial = first_val ?? fourth_val;
const data = first_val ?? 0;
document.getElementById('retrive').innerHTML = website;
document.getElementById('retrive1').innerHTML = Data_Tutorial;
document.getElementById('retrive2').innerHTML = Tutorial;
document.getElementById('retrive3').innerHTML = data;
</script>
</body>
</html>
Output
The image displayed illustrates four values generated by the operator.
Illustrative Example 3: Presented below is a demonstration illustrating the application of the nullish coalescing operator in conjunction with a function within JavaScript. By inspecting the console tab, the details of the function's attributes for various data sets are observable.
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<p id = "retrive"> output displays in the console tab </p>
<script>
function value(data) {
data = data ?? 82;
console.log(data);
}
value();
value(0);
value('Example');
</script>
</body>
</html>
Output
Displayed in the image are three values that result from the operator.
Illustrative Example 4: Demonstrating the application of the nullish coalescing operator in JavaScript with a constant variable. A constant function can be employed as a function containing the value.
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<p id = "retrive"></p>
<p id = "retrive1"></p>
<script>
const value = {
data : 0
}
const first_info = value.data ?? 80;
const second_info = value.info ?? 78;
document.getElementById('retrive').innerHTML = "Value of first_info: " +first_info;
document.getElementById('retrive').innerHTML = "Value of second_info: " +second_info;
</script>
</body>
</html>
Output
Displayed in the image are three values that result from the operator.
Why use the nullish coalescing operator
- The logical OR operator (||) is commonly utilized for establishing default values for variables. For example:
- 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.
- 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:
let count_data;
let result_var = count_data || 2;
console.log(result_var);
let count_data = 0;
let result_var = count_data || 2;
Short-circuiting occurs in the nullish coalescing operator.
let output =21? alert ('Hello');
let output = null ? alert('Hello');
Examples
The examples below demonstrate the utilization of the nullish coalescing operator in JavaScript for implementing short-circuiting. Various values are showcased through the logical operator across the console, alert box, and div tag.
Illustrative Example 1: Below is a demonstration that showcases the utilization of the nullish coalescing operator in JavaScript with a variable.
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<script>
var first_val = null;
var secon_val = undefined;
const website = first_val ?? console.log('Javascript Tutorial');
const Data_Tutorial = secon_val ?? console.log('PHP Tutorial');
const Tutorial = 0 ?? console.log("ES6 Tutorial");
console.log(Tutorial);
</script>
</body>
</html>
Output
The image below displays a range of values produced by the operator.
Output1
Illustrative Example 2: Below is a demonstration illustrating the concept of short-circuiting in the nullish coalescing operator within JavaScript. It showcases how JavaScript behaves with null and non-null operands.
<html>
<head>
<title> JavaScript Nullish Coalescing Operator </title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<p id = "retrive"></p>
<p id = "retrive1"></p>
<script>
const website1 = null ?? console.log('Example');
const website = 'tutorialsandexample' ?? console.log('Example');
const Data_Tutorial1 = undefined ?? console.log(28);
const Data_Tutorial = 21 ?? console.log(28);
document.getElementById('retrive').innerHTML = website;
document.getElementById('retrive1').innerHTML = Data_Tutorial;
</script>
</body>
</html>
Output
The images below display the webpage and console output when utilizing the operator.
Output1
The image shows the first operand is not null.
Output2
The screenshot demonstrates that the initial operand is null within the console.
Using the logical AND or OR operator directly in conjunction with the nullish coalescing operator will result in a SyntaxError, as shown in the syntax below:
To avoid this error, you can ensure clarity by using parentheses to explicitly define the order of operations when working with operators. By enclosing the expression on the left side of the ?? operator in parentheses, you can accurately specify the precedence.
const output = (null || undefined) ?? 'Example';
Example
The upcoming demonstration illustrates the phenomenon of Short-circuiting within the nullish coalescing operator in JavaScript. It showcases the operational behavior of JavaScript with both null and non-null operands.
<html>
<head>
<title> JavaScript Nullish Coalescing Operator the AND or OR operator to chain
</title>
</head>
<body style = "text-align: center;">
<h4> The Nullish Coalescing Operator in JavaScript </h4>
<h5> chaining the AND / OR operator with the Nullish Coalescing Operator </h5>
<p id = "retrive"></p>
<p id = "retrive1"></p>
<p id = "retrive2"></p>
<script>
const values = null || undefined;
const website = (null || undefined) ?? 'Example';
const website1 = (null && undefined) ?? 'tutorialsandexample';
const Data_Tutorial = values ?? 28;
document.getElementById('retrive').innerHTML = website;
document.getElementById('retrive1').innerHTML = website1;
document.getElementById('retrive2').innerHTML = Data_Tutorial;
</script>
</body>
</html>
Output
Displayed below are images illustrating the operator's webpage value.
Summary
When two values are provided, the nullish coalescing operator (??) returns the second value when the first one is either null or undefined. Unlike the logical AND or OR operators, the nullish coalescing operator in JavaScript cannot be directly combined with it due to its short-circuit behavior.