Optional Chaining and Nullish Coalescing in TypeScript

Optional chaining allows you to write code that will immediately stop running expressions if it hits a null or undefined.

Syntax

The Optional Chaining operator can be represented in three positions:

Property Access

A typical use case of this would be when looking for a value in a property that has a tree-like structure. In such a situation, we only want to proceed deeper into the tree if intermediate nodes exist. Let’s illustrate this with an example:

Say we want to display the user’s occupation, we could implement this like so:

With optional chaining in the code above, we’re checking if a user exists then we attempt to return the user’s occupation. It is important to note here that ?. checks if the value on the immediate left of it is null or undefined. What this means is, if we tried to access the user's first job using user?.jobHistory.firstJob, the code would return an error if there is no job history.

Optional Element Access

This is another variant of Optional Chaining used to access non-identifier properties such as arbitrary strings, numbers, and symbols. This can be illustrated like so:

Optional Function or Method Call

Optional Chaining can also be used in function calls. They come in handy when you need to call a function conditionally at runtime, i.e only call the function if it exists. This can be implemented like so:

In the code snippet above, we only log the data if a function, e.g console.log is passed to callFakeApi.

Nullish Coalescing is another new feature in TypeScript 3.7 which is closely related to Optional Chaining. It uses a unique operator: ??, which serves as the default or "fall back" value when an expression evaluates to null or undefined.

Nullish Coalescing Operator Cheatsheet

The code snippets above illustrate that the Nullish Coalescing Operator comes into play specifically for nullish values, not boolean or other data types.

Don’t forget to share this post if you found it helpful 🥳.

Related posts:

Last week I wrapped up a 10-day silent meditation retreat. In fact, it was the 5th 10-day retreat I had sat within the last few years. There are many, many reasons why I sit retreats and maintain a…

Ever wonder how successful people reach such heights? Think of a wildly successful person you admire. How did they get there? The typical answers are hard work, innate gifts (personality, natural…

Startups are constantly being formed at a rapid rate. Today, I’m going to share 3 startups formed recently and what they do. “DecorMatters is an Augmented Reality (AR) app that redefines how you buy…