DEV Community

Dhilip kumar
Dhilip kumar

Posted on

Optional Chaining in Javascript

#showdev #webdev #javascript

What if I tell you that the following snippet is Possible in javascript?


const hasWorld = response && response.data && response.data.msg && response.data.msg.includes('world');

const hasWorld = response?.data?.msg?.includes('world');
Enter fullscreen mode Exit fullscreen mode

This way of checking the property of an object known as Optional Chaining.

This is currently in Stage 3 tc39, however with babel we will be able to use it in our code right now by adding the following plugin @babel/plugin-proposal-optional-chaining to your config file for babel v7+.

Below is the Transpiled Babel Code Example with Optional Chaining.

Transpiled code Example

Top comments (6)

Collapse
 
kenbellows profile image
Ken Bellows •

You can actually take your code one step further:

const hasWorld = response?.data?.msg?.includes('world')

If msg is undefined, .includes() will never be called, and hasWorld will be undefined! One of my most awaited features

Collapse
 
dhilipkmr profile image
Dhilip kumar • • Edited

Ohh yes thank you. I'll edit the snippet

Collapse
 
ivanalejandro0 profile image
Ivan Alejandro •

Another alternative to:

const hasWorld = response && response.data && response.data.msg && response.data.msg.includes('world');

that you can use, if you don't want or can't to go with optional chaining.

let hasWorld = false;
try {
  hasWorld = response.data.msg.includes('world');
} catch (ignoreThisError) {
  // something went wrong, we don't care exactly why,
  // the string we look for is not there
}

If you're interested, I wrote some thoughts around this on dev.to/ivanalejandro0/simplify-nes...

Collapse
 
dhilipkmr profile image
Dhilip kumar •

Try catch for every prop check in my cod would reduce its readability for sure. So, I personally would prefer the former. But yes it is an alternative approach

Collapse
 
ivanalejandro0 profile image
Ivan Alejandro •

Yeah, I think that for this and many other things one of the most important things is what's easier to work with for you and your team :)

Collapse
 
dotorimook profile image
dotorimook •

It sounds good. Is it able to apply @babel/plugin-proposal-optional-chaining to typescript CRA project? I tried to using the plugin with react-app-rewired and customize-cra, but it gets errors.

Read next

ng_news profile image

Ng-News 24/46: Angular Camp, TypeScript 5.7 RC

ng-news -

jeet_dhandha profile image

Building and Comparing Table Data Made Easy with @libs-jd/table-data-kit

Jeet Dhandha -

chintanonweb profile image

Mastering JavaScript Memory: A Beginner’s Guide to Stack and Heap

chintanonweb -

therealmrmumba profile image

Top 10 WebSocket Testing Tools for Real-Time Apps (Updated 2024)

Emmanuel Mumba -