DEV Community


Posted on • Updated on

Confused with ?? & || in JS ?

Have you confused between ?? and || in javascript. Majority of the people think that both are same but both are not same. Purposes are different.

|| is an OR operator and ?? is a nullish coalescing operator.

Whats the difference ?

About ||

This is an OR operator. OR operator will check for operands and returns truthy operand if any of the operand is valid or truthy.

Here are the examples:

true || false // true because first operand is true
1 || false // 1 because first operand is 1 i.e truthy
false || "Hello" // "Hello" because second operand is "Hello" i.e truthy
Enter fullscreen mode Exit fullscreen mode

Looks good then what is the problem with || and why we need ??.

Look at this snippet

0 || 1 // 1 In javascript 0 is falsy value so || operator will ignore it.
"" || 1 // 1 because "" is empty string in JS empty string is falsy value.
Enter fullscreen mode Exit fullscreen mode

But 0 is not a falsy value it is a number. Setting a variable to 0 dosen't mean that setting falsy value to variable. When there are no characters in a string we call it empty string. If a string dosen't have chars it dosen't mean its a falsy.

With || we have this problem. Every time when we deal with the scenarios mentioned above we have to write extra conditions.

From backend service we are receiving student marks. Assume for some students there are extra subjects for the students who don't have extra subjects API giving null or undefined value for those subjects. In frontend if the subject marks are null or undefined we have to show "NA". We can write like this

Object.keys(marks).forEach(subject => {
 console.log(subject + " -> " + (marks[subject] || "NA")
Enter fullscreen mode Exit fullscreen mode

But we have a problem with the above code what is subject marks or 0 ?

We have to modify the code like this

Object.keys(marks).forEach(subject => {
 console.log(subject + " -> " + (marks[subject] || marks[subject]) == 0 ? marks[subject] : "NA"))
Enter fullscreen mode Exit fullscreen mode

So we now we have a solution for this problem in javascript to avoid these scenarios i.e nullish coalescing operator.

Nullish coalescing operator will check operands and gives non nullish value. Look in to the following snippet.

0 ?? 1 // 0 
"" ?? 1 // ""
0 ?? null // 0
null ?? 1 // 1
Enter fullscreen mode Exit fullscreen mode

As 0 and "" are not nullish values it will consider those.

What values are nullish ?

  • null
  • undefined

Happy coding !!

Top comments (0)