Optional chaining and nullish coalescing in JavaScript

Written by Danny Guo✏️

Optional chaining and nullish coalescing are new JavaScript operators. They have both reached stage 3 in the TC39 process, which means that their specifications are complete.

I have been looking forward to these operators for a long time. I believe they are the most significant improvement to JavaScript ergonomics since async/await. They don’t enable anything new in terms of functionality, but they will make quite a lot of code nicer to both write and read.

Optional chaining

Working with data in JavaScript frequently involves situations where you aren’t sure that something exists. For example, imagine getting a JSON response from a weather API.

{
  "data": {
    "temperature": {
      "current": 68,
      "high": 79,
      "low": 45
    },
    "averageWindSpeed": 8
  }
}

You can go through each level of the object to get the high temperature.

const highTemperature = response.data.temperature.current;

But maybe you’ll request the weather data for different days in the past, and the service doesn’t have the high temperature for some days, or any temperature data at all for other days. So temperature or temperature.high could be undefined.

{
  "data": {
    "averageWindSpeed": 12
  }
}

In this case, trying to get the high temperature will result in an exception that many developers are quite familiar with when working with JavaScript: TypeError: Cannot read property 'current' of undefined.

To avoid the exception, you have to add checks for each level of the object. Maybe the API documentation says that when there is an error, the top-level property will be error instead of data, so you can’t even be sure that data exists.

let highTemperature;
if (response.data && response.data.temperature) {
  highTemperature = response.data.temperature.high;
}

This code is safer but also more verbose. Our data isn’t even that deeply nested; a more complicated object might have many more levels to check.

Optional chaining provides a terse alternative. It is JavaScript’s version of the safe navigation operator, which exists in many languages, such as Swift and C#. With the optional chaining operator (?.), our code would look like this instead:

const highTemperature = response.data?.temperature?.high;

This is still safe but almost as succinct as the original code. If either response.data or response.data.temperature is null or undefined, the entire expression short-circuits and returns undefined rather than throwing an exception.

Optional chaining works the same when accessing a property through bracket notation.

const property = "temperature";
const highTemperature = response.data?.[property]?.high;

It isn’t restricted to sub-levels. You can use it at the top level as well.

const highTemperature = response?.data?.temperature?.high;

Optional chaining even works with function calls.

const celsiusTemperature = temperature.toCelsius?.();=

If temperature doesn’t have a toCelsius property, this will result in undefined instead of throwing an error. However, note that if temperature happens to have a toCelsius property that just isn’t a function, this will still cause an error: TypeError: temperature.toCelsius is not a function.

Nullish coalescing

In addition to accessing nested values, another common pattern in JavaScript is to use the logical OR operator (||) to coalesce values because it returns the first truthy operand, not a Boolean.

Let’s say you’re building a website and have added some animations to it. You have decided to allow users to customize how long the animations take. You want to use a default value if the user doesn’t provide one, so you do the following.

const defaultTime = 2;
const animationTime = settings.animationTime || defaultTime;

This code might work in general, but there is a subtle bug. The Boolean false, empty strings (""), NaN, and the number 0 are all falsy. In this example, a user might not want any animations at all. But if he or she sets the time to 0, this code will ignore it and erroneously use the default value of 2.

We could be more explicit.

const defaultTime = 2;
const animationTime =
  typeof settings.animationTime === "number"
    ? settings.animationTime
    : defaultTime;

The nullish coalescing operator (??) gives us a cleaner method.

const defaultTime = 2;
const animationTime = settings.animationTime ?? defaultTime;

Nullish coalescing acts like regular coalescing, but it only rejects values if they are strictly null or undefined, so this code will accept a value of 0 if it is provided.

Like regular coalescing, nullish coalescing short-circuits once an operand is satisfactory, so further expressions are not evaluated. This is important to keep in mind if further expressions have side effects.

Conclusion and ecosystem support

Optional chaining and nullish coalescing make it easier to write safer code, and the JavaScript community seems eager to adopt them. Even though they are not part of the formal ECMAScript specification yet, tools have already started to add support.

• TypeScript supports them as of version 3.7 (6 November 2019)
• Babel has an optional chaining plugin and a nullish coalescing plugin
• Prettier supports them as of version 1.19 (9 November 2019)
• ESLint doesn’t natively support experimental language features until they reach stage 4, but it’s possible to use Babel as a workaround through babel-eslint

---

Plug: LogRocket, a DVR for web apps

 

 
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
Try it for free.

---

The post Optional chaining and nullish coalescing in JavaScript appeared first on LogRocket Blog.