Optional Chaining aka Elvis Operator in Javascript

Marek Krzak
Nov 1 · 3 min read

Cheking if object is not falsy and next taking property of that object is one of the basic operation in all programming languages. With that operation code is more safety and protected for bugs. In javascript we can simply compare value of property does is truthy or falsy but we can not make it in simply way when comparison tree is complex.

What is solution in that situation?

Babel and Optional Chaining aka Elvis Operator

Elvis Operator in Javascript

Other languages had before in its arsenal of syntax Elvis Operator which is short cut for checking does object is truthy and when it is. It returns it. Or if it is not truthy return null and not cheking other properties of that object. That is making in safety way because we can chaining other operation on that element even when it is falsy.

But what we say about javascript… and what would we do without Babel ;) Now it comes with helps @babel/plugin-proposal-optional-chaining with that plugin to Babel we can safety cheking properties in object without afraid about ‘Cannot read property x of undefined’ error.

How Elvis Operator works in practice

At first let’s see how we solving this problem without optional chaining.

Domain of that problem will be getting street properties from user object. Assume user has address property and next address has street property. OK, so now we are ready to see examples without Elvis Operator.

First approach to Elvis Operator

Basic solution when Elvis Operator is lack

Quite dirty optional chaining and too much piece of code only for getting street from user. But that solution is popular because here is used well known if statement.

Second approach to solving optional chaining

Almost Elvis Operator in ES5

This solution looks a little bit not readable but is quite good approximation Elvis Operator in ECMAScript 5 syntax. Additionally that is closed in one line of code.

Third way to simulate Elvis Operator

Next we have collection of quite similar solution like Proxy object or custom function where we can wrapped complex checking of null value and recurrently invoking on nested properties of object in safe checking and return value of destination property. That way is usually cleaner than above solutions but it is not so exact to understand for programmer who don’t know that functions. In particular for new programmers.

Genuine solution with Elvis Operator

And now here it is Elvis Operator aka optional chaining so let’s see how it works.

Our above example for street property with Elvis Operator will be look like that.

Elvis Operator

That looks pretty clean and tempts for using Elvis Operator all time :)

Best wishes for Elvis Operator coders

I hope I convinced you to using Elvis Operator in Javascript and your code with optional chaining will be more clean and readable for your colleagues and for you after longer come back to your code

If you like this Elvis Operator hints, like me here or follow me for other new articles.

I wish pleasant coding in Elvis Operator.

Mir i sława!

Marek Krzak

Written by

I’m a Frontend Developer and I like my job.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade