The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

Before proceeding further, let us remind ourselves what are the falsy values. In JavaScript, the following values are always falsy:

    NaN
    0
    empty string - "  "  or '  '
    null
    undefined
    false

Now have a look nullish coalescing operator example:

let score = 0;
let pass = 0 ?? 50;

Here value which has pass is 0 because the ?? operator does not coerce falsy values. Therefore, the nullish coalescing operator only returns the right-hand side operand, if the left-side operand is null or undefined.

Now let us replace 0 with undefined/null then it will return 50. In this case it makes sense to return the right-hand side value, because undefined/null means that the variable was not assigned a value.

let pass = null ?? 50;
let pass = undefined ?? 50;

• The nullish coalescing operator works very much like the logical OR operator. The only difference is that it checks whether the value is nullish instead of falsy. This means that the operator will return its right-hand side operand if the left-hand side values are null and undefined.

let person = {profile: 
                      {name: " ",age: 0}
                   };


        console.log(person.profile.age || 18);              // give 18


        console.log(person.profile.age ?? 18);              //give 0

• First outputs is right-hand side values. This happens because the logical OR operator || returns the right operand if the left operand is falsy.
• While the nullish coalescing operator ?? returns falsy values if the left operand is neither null nor undefined.

Comparison with ||

The important difference between them is that:

|| returns the first truthy value.
?? returns the first defined value.

In other words, || doesn’t distinguish between false, 0, an empty string "" and null/undefined. They are all the same – falsy values. If any of these is the first argument of ||, then we’ll get the second argument as the result. For example,

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

• The height || 100 checks height for being a falsy value, and it’s 0, falsy indeed. so result the second argument, 100.

• The height ?? 100 checks height for being null/undefined, and it’s not, so the result is height “as is”, that is 0.

Few Examples-

const nullValue = null;
const emptyText = ""; // falsy
const someNumber = 42;

const valA = nullValue ?? "default for A";
const valB = emptyText ?? "default for B";
const valC = someNumber ?? 0;

console.log(valA); // "default for A"
console.log(valB); // "" (as the empty string is not null or undefined)
console.log(valC); // 42

Conclusion-

• The Nullish Coalescing Operator is handy when we want to use falsy values as a default.

• The Nullish Coalescing Operator returns the right-hand side value when the left-side one is undefined or null.

• Using the OR (||) operator, can run into troubles with falsy values like 0 and empty strings.
• || is a logical boolean operator, and it coerces values. Thus, it does not return falsy values.