Optional Chaining aka Elvis Operator in Javascript
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

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
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
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.
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!
