Nullish Coalescing Operator (??) in JavaScript

What is a Nullish Coalescing Operator?

The nullish coalescing operator returns the right-hand side expression if the left-hand side expression is null or undefined.
This operator is written as two question marks ??

Operator precedence:

Precendence	Operator	Associativity	Syntax
4	Logical OR (||)	left-to-right	..||..
4	Nullish coalescing operator (??)	left-to-right	..??..
3	Conditional (Ternary)	left-to-right	..?.. : ..

Syntax: left-hand-side-expression ?? right-hand-side-expression

Let's take a deep dive to understand how the nullish coalescing operator works!

let foo;
console.log(foo ?? "hi!")
// Output : hi!

Here we are not initializing variable foo with any value i.e. it is undefined. That's why the right-hand-side expression is getting printed.

Let us see the same example using the ternary operator.

let foo;
console.log((foo !== undefined || foo !== null) ? foo : "hi!")
// Output : hi!

As we can see, both the outputs we get, one by using the nullish coalescing operator and the other by using the ternary operator are the same.

What is the difference between nullish coalescing operator and ternary operator?

The main difference is that the ternary operator returns the right-hand side expression if the left-hand side expression has a falsy value while the nullish coalescing operator returns the right-hand side expression if the left-hand side expression is null or undefined (but no other falsy values)

Right-hand side expression is returned in	If left-hand side expression
Nullish Coalescing	is null or undefined (but no other falsy values)
Ternary	has a falsy value

What are the falsy values?

Falsy evaluates to false.
There are total 6 falsy values in JavaScript

• undefined
• null
• NaN
• 0
• "" //empty string
• false

Let us see the examples:

const obj = {
    isBoy : false,
    rollNo : 45
}
const nullishVal = obj.isBoy ?? obj.rollNo
console.log(nullishVal) // Output : false

const ternaryVal = obj.isBoy ? obj.isBoy : obj.rollNo
console.log(ternaryVal) // Output : 45

const logicalOrVal = obj.isBoy || obj.rollNo
console.log(logicalOrVal) // Output : 45

Here obj.isBoy is neither undefined nor null, it is false, that's why the nullishVal is returning the value of obj.isBoy while ternaryVal and logicalOrVal are returning the obj.rollNo i.e. 45 as the value of obj.isBoy is falsy.

const price = 0;
console.log(price || 100) // Output : 100
console.log(price ? price : 100) //Output: 100
console.log(price ?? 100) // Output : 0

const name = null;
const age = 20;
const height = undefined;
console.log(name ?? age ?? height ?? "Nothing") // Output : 20
//Returns first value which is neither null nor undefined
console.log(name || age || height || "Nothing") // Output : 20
//Returns first defined value

Example using function:

const A = () => {
  console.log("a");
  return null;
}
const B = () => {
  console.log("b");
  return "function B";
}
const C = () => {
  console.log("c");
  return "";
}
A() ?? B() // Output : a b
// As A() is returning null value both functions will be evaluated
C() ?? B() // Output: c
// "" is a falsy value but not null or undefined so C() will be evaluated

Now that you have understood the basics of nullish coalescing operator and what is difference between ..??.., ..?.. : .., ..||.. YOU ARE READY TO ROCK THE OPERATOR!!!.🤩