JavaScript: The nullish coalescing operator

The nullish coalescing operator is one more logical operator in ES2020. The intent of the nullish coalescing operator is to provide a complementary operator for the optional chaining operator that we already wrote about here.

Why the need for this?

When we want to assign a default value to a variable we usually use the || (OR) operator.

let city; // city is defined but not assigned so it is undefined
let myCity = city || "London"; // London

OR as a boolean logical operator converts a variable to boolean and compares it to falsy values. Which works fine if we don’t consider 0, ‘’, NaN as valid values. On the other hand, if you are considering just null and undefined as nonvalid values this approach can cause problems as we can see below.

let city = "";
let cityCode = 0;

let myCity = city || "London"; // London
let myCityCode = cityCode || 42; // 42

Nullish coalescing operator

The nullish coalescing operator ?? is basically a value selection operator that returns the right side operator if the left side operator is a “nullish” value ( null or undefined ), otherwise it returns the left side. Examples from above would look like this:

let city = "";
let cityCode = 0;

let myCity = city ?? "London"; // ""
let myCityCode = cityCode ?? 42; // 0

Nullish coalescing operator like other Javascript operators evaluates from left to right.

let city = "London" ?? "Paris" ?? "New York"; // London
let city = undefined ?? "London" ?? "Paris"; // London
let city = undefined ?? "London" ?? undefined; // London

It short-circuits.

const user = {
  address: {
    city: {
      name: "London"
      //code: 20
    }
  },
  firstName: "Jane",
  lastName: "Doe",
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  getCityCode() {
    console.log("undefined");
    return this.address.city.code;
  }
};
console.log(user.getCityCode() ?? user.getFullName());
// "undefined"
// "Jane Doe"

Combining with AND and OR operators

For combining the nullish coalescing operator with AND and OR operators it is important to provide parenthesis to explicitly say what order is correct.

let city; //undefined
let myCity = city || null ?? "London" // Error
let myCity = city || (null ?? "London") // London

Optional chaining and the nullish coalescing operator

Like we already mentioned the idea behind the nullish coalescing operator is to complement the optional chaining operator so the combination of these two operators comes almost naturally.

const user = {
  address: {
    city: {
      name: "London"
      //code: 20
    }
  },
  firstName: "Jane",
  lastName: "Doe",
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};
let cityCode = user?.address?.city?.code; // undefined
let cityCode = user?.address?.city?.code ?? 20; // 20

Conclusion

Both the nullish coalescing operator and the optional chaining operator right now sit in Stage 4 ECMAScript standard and they are available in most modern browsers as well with Babel plugins @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator