Optional Chaining Operator

Having been around for quite some time as a Babel plugin, the optional chaining operator was finally included in this year's ECMAScript specification, ES2020. Consider the following example:

const child = {
  name: "Jane Appleseed",
  naughty: false,
};

const childAddress = child.address.street;
console.log(childAddress);

What happens when we run this code? Since the address property isn't defined in the child object, we get an error saying that we can't read the property street from undefined.

We often prefer that childAddress is undefined rather than causing an error. One possible approach to this problem is to check whether child.address is nullish (null or undefined). We can use a simple ternary operator to achieve this:

const childAddress = child.address ? child.address.street : undefined;

Alternatively, we could use the more elegant logical AND operator:

const childAddress = child.address && child.address.street;

The downside of this is that these conditional expressions can become quite long and repetitive if we chain many properties together. This is where the optional chaining operator (?..) comes into play:

const childAddress = child.address?.street;

Instead of causing an error when a property is null or undefined, the expression returns undefined. Yay, code that is both shorter and easier to read - we like that!

Nullish Coalescing Operator

Just like optional chaining, the nullish coalescing operator (quite a tongue twister) was one of the features introduced with ES2020. Again, let's look at an example:

const child = {
  name: "Jane Appleseed",
  naughty: undefined,
};

This time, the naughty property is undefined. How can we make it default to false in this case? Obviously, we can't just assume that the child was naughty this year! Well, we can use the logical OR operator (||):

const isNaughty = child.naughty || "false";

This works in the above case, but we must take a certain characteristic into account: the logical OR operator returns the right operand if the left operand is falsy (this includes undefined and null, but also 0 and ''). Let's add another property to the child object, age. Since also newborns should get their presents, we have to allow the falsy value '0'. This is where the nullish coalescing operator (??) comes to the rescue:

const age = child.age ?? -1;

This operator only returns the right operand if the left operand is nullish, and returns the left operand otherwise. Therefore, children with an age of zero don't default to -1 in the above example.

What's Yet to Come

Those of you who have been following this Christmas calendar since December 1st have already read about the logical assignment operator a couple of days ago. You haven't? Then have a look at the article about this and other new features in ES2021!

This is however not the last operator to be added. We were writing about the pipeline operator exactly two years ago while it was still a stage 1 proposal. And guess what, it still is! In the JavaScript world, everything takes its time. Someday, though, it will make your life as a JavaScript developer a little easier.

This article summarized the two most recent of the 46 operators in Javascript. If you want to learn more about the remaining 44, you should take a look at this amazing Operator Lookup.