What is Nullish Coalescing Operator?
A Nullish Coalescing operator is a binary logical operator and which used to provide default values other than null or undefined value to a variable and it's denoted by ??.
Note: In Javascript When performing property accesses, it is often desired to provide a default value. To `provide a default value now widely using Nullish Coalescing Operator.
let x=undefined ?? 22;
console.log(x) //output: 22
In Javascript, we know logical operators that are used with boolean values, when it is, it returns a Boolean value.
Before the Null Coalescing operator, mostly the logical OR operator is used to provide a default value to a variable. but the Logical OR operator || can be problematic if your left value might contain " " or 0 or false.
let's understand it by some examples.
console.log(1||"none" ) // output :- 1
console.log(0|| "none") // output :- none
console.log("kamal"||"none") // output :- Kamal
console.log(""|| "none") // output :- none
console.log(true || "none") // output :- true
console.log(false || "none") // output :-none
console.log(undefined || "none") // output :- none
console.log(null || "none") // output :- none
To overcome the above problem using the Null coalescing Operator which accepts falsy values as default values except null or undefined.
console.log(1 ?? "none" ) // output :- 1
console.log(0 ?? "none") // output :- 0
console.log("kamal" ?? "none") // output :- Kamal
console.log("" ?? "none") // output :- " "
console.log(true ?? "none") // output :- true
console.log(false ?? "none") // output :-false
console.log(undefined ?? "none") // output :- none
console.log(null ?? "none") // output :- none
The OR operator || uses the right value if the left is falsy, while the nullish coalescing operator ?? uses the right value if the left is null or undefined.
Nullish Coalescing Operator with Different Operators:
Nullish Coalescing Operator Specifically deals with null or undefined values because of that Nullish coalescing Operator becomes Complementary operator to Optional Chaining Operator(?.)
Optional Chaining Operator(?.):
let fruits={Apple:2,grapes:null};
console.log(fruits?.grapes ?? "No grapes in fruit shop")
// output:- No grapes in the fruit shop
console.log(fruits?.Apple ?? "No Apples in the shop")
//output :- 2
Logical Or Operator (||):
(null || "program") ?? "Hello world" //output:- program
Summary :
- Nullish Coalescing Operator has lower precedence than logical or ( || ) Operator.
- Nullish Coalescing Operator gives rightHand side argument if only needed. (short-circuiting)
For more:-
Note: value null represents an intentional absence of object value; boolean operations are treated as falsy.
- undefined is a variable that has not been assigned a value.
Browser compatibility of Nullish Coalescing Operator :
It has full support in the latest version of major browsers like Chrome, Edge, Firefox, Safari, etc.
👏👏Thank you for reading the blog 👏👏👏😀😀