Optional Chaining Has Arrived!

Last week we talked about Nullish Coalescing, now it's time for another new addition to ECMAScript.

The dreaded existence check

Have you ever worked with an API full of objects that were inconsistently formed? Multiple levels deep and frustrating to parse. Let's use a smaller example to talk about this.

const obj = {
  node : {
    thing: 1
  }
}

Suppose we want to access thing. We can do it like this.

const thing = obj.node.thing

But what if we can't guarantee that node exists? If we try and access thing on undefined we'll trigger an error. So we'll have to check first.

const thing = obj.node ? obj.node.thing : undefined

This is the terser option, using a ternary, but it works all the same.

This is a reasonable piece of code! But it can get incredibly repetitive if you have deeply nested objects.

Optional Chaining to the Rescue

Well, we don't have to do that anymore. We can use the new optional chaining syntax.

const thing = obj.node?.thing

In this case, obj.node is undefined. Typically, trying to access thing on undefined would trigger an error, but not in this case! When you use optional chaining it doesn't throw that error and instead evaluates the expression to undefined.

And what's even cooler is that we can combine this with nullish coalescing.

const obj = {}

const thing = obj.node?.thing ?? 2
// thing will be 2

Since using optional chaining gives us undefined, thing will resolve to the value on the right-hand side of the ?? operator. In this case, that's 2.

Chaining Optional Chaining

Note that my example above uses optional chaining once in order to clarify how it works. However, you can use it multiple times in the same expression.

const thing = obj?.node?.thing

The expression above is valid and may come in handy if obj looks like this.

const obj = null

The risks

Now I can't write about optional chaining without including a section on warnings. To be honest, a lot of people were really against adding this to the language. They had concerns about abuse, and that's fair!

?. should NOT replace all instances of .. If you do that you'll create all kinds of silent failures. Optional chaining is another tool in your belt, that's it.

If you don't control the data you're accessing and it's particularly nested and it's ok if the result doesn't exist then maybe optional chaining is the right choice! But notice all those "and"s in the previous run-on sentence. Make sure you explicitly choose to use this syntax. It shouldn't be your default.

Not just for objects!

Oh, I forgot to mention the best part. Optional chaining works on more than just objects!

It works on arrays.

const tenthItem = arr?.[10]

This makes sure that arr exists before trying to access the 10th element.

It works for function calls.

const message = obj?.stringFunction()

This makes sure obj exists before you try and call a function on it.

And it works with top-level objects.

functionDoesNotExist?.()

If this function doesn't exist, it will evaluate to undefined.

Isn't this fun?

So much power! But remember, that means you have a responsibility to use it wisely!

Comments

[Ben Halpern]

I feel like optional chaining is a real love-hate programming language concept in general because of how it can be used to excuse poorly constructed programs.

Which makes it right at home in JavaScript 😄

[Laurie]

Lol, you're not wrong. There is a reason I couldn't write this post without a risks section!

[joon]

I thought everything about JS is love-hate. :)

[David Wickes]

functionDoesNotExist?.()

😞😖😩😫😵

[Vedmant]

This is certainly a good feature, before this I had to use something like lodash get('obj.node.foo', 'default').

[Jaken Herman]

Sweeeet

[Jacob Evans]

What do you need to enable it? Just some Babel stuff?

[Jacob Evans]

Nullish too?

[Laurie]

Ya, right now the only way to get the features is Babel. It will be in node soon, but no official announced date.

[Jacob Evans]

Wicked cool!

I also didn't know you could use it on arrays and functions which opens up a whole new world... I don't know how many times I've checked an array to exist and have length before using .map() 😆😅

[Seanmclem]

If you're a fan of react it's now part of react scripts 3.3. And in the latest version of vs code it's supported

[Jared]

One of my favorite features in Swift/Kotlin, glad it's coming to my real home in JS haha

[Ashvin Kumar Suthar]

Hi @Lauri, Nice article !!

Please try JSitor.com editor, it supports Nulliesh Coelscing and Optional Chaining already 😊

[Saurabh Sharma]

I'm waiting for the pipeline operator it will be the biggest change for me since es6

[Usman Suleiman]

I read somewhere that it could increase bundle size. How true is that?

[Laurie]

bundle size of node? Or the project that implements it?

[Usman Suleiman]

The project that implements it.

[Laurie]

It’s not really been in the wild enough to know. My suspicion is it isn’t a problem if you’re using it as a replacement for existence checks would have anyway. If you put it everywhere then yes, because the implementation is more complex than just accessing things.

[Tyler Smith]

This is witchcraft and I love it 😂