Nullish Coalescing - JavaScript

A few days ago, I wrote a post describing "Optional chaining operator" in JavaScript. Nullish coalescing proposal goes along with the one mentioned above.

1. Who are the authors of the proposal?

"Nullish Coalescing" is a proposal in Stage 3, and it was created by Gabriel Isenberg, Daniel Ehrenberg, and Daniel Rosenwasser.

2. What is the syntax?

The syntax is straightforward, and you have to write: "??" to achieve the desired result.

3. What can you use it for?

Let's create a simple object:

const patient = {
   firstname: "Vanessa",
   lastname: "White",
   nextOfKin: "",
   sugarLevel: 0,
   age: 31,
   address: {
      street: "New street 56",
      postcode: "M912TU"
   },
   nullValue: null
};

I have created a simple patient object, where we've got necessary details and address. Now, let's try to evaluate object values by using "||" operator.

patient.firstname || "No name" // "Vanessa"

The code shown above demonstrates the common usage of "||" operator. Take a look at the next example down below:

patient.dateOfBirth || "No date of birth" // "No date of birth"
patient.nullValue || "Null value is there" // "Null value is there"

Above example shows common cases where you can use "||" to determine when the property is undefined or nullish. Pay attention to the details; there are falsy values that produce unexpected results.

patient.nextOfKin || "No next of kin" // "" is falsy, produces: "No next of kin"
patient.sugarLevel || "No sugar level" // 0 is falsy, produces: "No sugar level"

As you can see above, it is confusing, and it shouldn't be like that. If the above code would behave correctly, we should receive the actual result instead of an alternative text.

The nullary coalescing operator is intended to handle these cases better and serves as an equality check against nullary values (null or undefined).

That's where "??" operator comes into the play.

The expression at the left-hand side of the "??" operator evaluates to undefined or null, and its right-hand side is returned. That's the correct behaviour. Take a look at the example.

patient.dateOfBirth ?? "No date of birth" // property is undefined, it produces: "No date of birth."
patient.nullValue ?? "Null value is there" // property is null, it produces: "Null value is there."

patient.nextOfKin ?? "No next of kin" // "" is falsy, produces: false
patient.sugarLevel ?? "No sugar level" // 0 is falsy, produces: 0

Take a look at the last two lines of code and compare them with the following ones where we use "||" operator:

patient.nextOfKin || "No next of kin" // "" is falsy, produces: "No next of kin"
patient.sugarLevel || "No sugar level" // 0 is falsy, produces: "No sugar level"

Can you see the difference? It's going to recognise falsy values strictly.

4. What is the support?

None, unfortunately. It's close to being in stage 4. You can find the support for this feature in Babel.

Resources:

1. Nullish Coalescing Spec

This article was initiall written on: Robert Wozniak - Dev blog