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');
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.
Top comments (6)
You can actually take your code one step further:
If
msg
is undefined,.includes()
will never be called, andhasWorld
will beundefined
! One of my most awaited featuresOhh yes thank you. I'll edit the snippet
Another alternative to:
that you can use, if you don't want or can't to go with optional chaining.
If you're interested, I wrote some thoughts around this on dev.to/ivanalejandro0/simplify-nes...
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
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 :)
It sounds good. Is it able to apply
@babel/plugin-proposal-optional-chaining
to typescript CRA project? I tried to using the plugin withreact-app-rewired
andcustomize-cra
, but it gets errors.