Optional Chaining Operator in JavaScript A new proposal to help you write shorter and more concise JavaScript

Who Am I? Mohamed Oun Front-end engineer at Prodigy AI @Mohamed3on [email protected] Mohamed3on.online

Optional what now?

JavaScript has a problem..

Let’s say you want to access a nested property • We have users, some of them have addresses, some don’t • We want to access the street number of a user’s address

Current solutions

Current solutions • Use nested ternaries • Opinion: Please don’t

Current solutions • Check if the properties exist before accessing them • Opinion: Clunky, not optimal

Current solutions • Use an external library • Opinion: Nice! But wouldn’t it be better if it was built into the language?

Enter: The optional chaining operator!

Optional Chaining Operator • A proposal for an operator to solve this problem in an simpler way as part of the language • Shorter, clearer than all the current solutions • No need for an external library • No more ’Cannot read property X of undefined’ errors

How it works • Use the operator ?. • checks if the Left-Hand-Side of it is not null or undefined • If it is, the expression short-circuits (returns undefined), else the Right-Hand-Side is evaluated • Works on properties, arrays and functions

Inspirations

This operator already exists with similar semantics in: • C#: Null-conditional operator • Swift: Optional Chaining • CoffeeScript: Existential operator

Status of the proposal • At Stage 1 (Proposal, experimental), close to being Stage 2 (Formal draft) • Can already be used with Babel (But use with caution) • Supported by Flow

That’s it! Thank you