Danny Guo Hacking away on sublimefund.org

Optional chaining and nullish coalescing in JavaScript

2 min read 807

Optional Chaining And Nullish Coalescing In JavaScript

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.

We made a custom demo for .
No really. Click here to check it out.

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.

 

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    : Debug JavaScript errors easier by understanding the context

    Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.

    LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to find out exactly what the user did that led to an error.

    LogRocket records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

    .
    Danny Guo Hacking away on sublimefund.org

    One Reply to “Optional chaining and nullish coalescing in JavaScript”

    1. You can use optional chaining today in every browser:

      const highTemperature = (((response||{}).data||{}).temperature||{}).current;

    Leave a Reply