Nullish coalescing (??) and Optional chaining (?.)

We all are familiar with the logical OR (||) operator. It returns the right-hand side operator when the left-hand side operator is a falsy value.

console.log(10 > 20 || 20);
//20

But what if you want to use falsy values like 0 , '' , false, and NaN then you can encounter unexpected results when it comes to the OR operator. And will have to write nested if-else logic to return the falsy values in your code.

Falsy values in javascript are 0 , null , '' , undefined, false, and NaN .

In order to save ourselves from this lengthy nested loops Nullish coalescing (??) is introduced.

Nullish coalescing (??)

Nullish coalescing operator (??) returns the right-hand side operand when its left-hand side operand is null or undefined and otherwise returns its left-hand side operand. It only checks for nullish values(null or undefined).

console.log(null ?? 20);
//20
console.log(undefined ?? 20);
//20

Comparing logical OR (||) and Nullish coalescing (??)

Nullish coalescing provides an alternate way to deal with falsy values except for null and undefined.

• For falsy value 0

    const person = {
        name: "Jonas",
        age: 0
    };
    console.log(person.age || 1);
    // 1
    console.log(person.age ?? 1);
    // 0
  

• For falsy value '' (empty string)

    console.log('' || "Hello");
    // Hello
    console.log('' ?? "Hello");
    // ''
  

• For falsy value false

    console.log(false || true);
    // true
    console.log(false ?? true);
    // false
  

• For falsy value NaN

    console.log(NaN || 20);
    //20
    console.log(NaN ?? 20);
    //NaN
  

  Combining both OR (||) and Nullish coalescing(??)

  We cannot directly combine (||) with (??) as the precedence of (??) is same as that of (||) and hence it will throw a syntax error.

    console.log(10 > 20 || 30 ?? 40);
    //Uncaught SyntaxError: missing ) after argument list
  

  However, by providing parenthesis, we can explicitly indicate precedence is correct.

    console.log((10 > 20 || 30) ?? 40);
    //30
  

Optional chaining (?.)

The optional chaining operator (?.) is used to check nested object properties or call a function that could be null or undefined (nullish values), the expression short circuits and evaluates to undefined instead of throwing an error.

Usually when we try to access the properties of an object or call a function that doesn't exist it throws an error. So optional chaining provides a secure way of checking whether the property or function exists or not.

const person = {
    name: "Jonas",
    age: 0
};
console.log(person.country?.state);
//undefined

Normally, it would have thrown a type error but by using optional chaining we can avoid that. Another approach could be to use AND(&&) operator.

const person = {
    name: "Jonas",
    age: 0
};
if(person.country && person.country.state)
console.log(person.country.state);
// undefined

But as you can see it's such a hassle to type all those things and that's where optional chaining saves our lives. Some points to remember while using optional chaining :

• Optional chaining on the left-hand side of an assignment

  Optional chaining doesn't work on the left-hand side of an assignment. This results in an error. Since the optional chaining will return undefined.

•     let user = {};
      user?.message = "Hello"; 
      // Uncaught SyntaxError: Invalid left-hand side in assignment
  

• Optional chaining with function calls

  We can use optional chaining when we are trying to call a function that may not exist and automatically return undefined instead of throwing an error.

•     const person = {
          name: "Jonas",
          age: 0
      };
      person.country?.();
      // undefined
  

• Combining Optional chaining with the Nullish coalescing operator

  We can use both (??) and (?.) at the same time and set a default value if our optional chaining returns nullish values.

    const person = {
        name: "Jonas",
        age: 0
    };
    console.log(person?.occupation ?? "Not mentioned");
    // Not mentioned
  

Conclusion

Nullish coalescing operator (??) returns the right-hand side operand when its left-hand side operand is null or undefined and otherwise returns its left-hand side operand.

The optional chaining operator (?.) is used to check nested object properties or call a function that could be null or undefined, the expression short circuits and evaluates to undefined instead of throwing an error.

Both nullish coalescing operator (??) and optional chaining operator(?.) checks for nullish values(null or undefined).