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.
Learn more →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
LogRocket: Debug JavaScript errors more easily 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!
Try it for free.
You can use optional chaining today in every browser:
const highTemperature = (((response||{}).data||{}).temperature||{}).current;