Destructing is cool but I start to encounter serious issues when doing destructing of nested objects. I have this code:
const {
credit: { amont },
} = userProfile
This is dangerous because what if credit is null? the whole app breaks. How do I prevent this? I know one way is to use Typescript but I'd rather not. I start to doubt destructing for nested has no difference from using dot.
It isn't possible to solve this with deep destructuring. As another answer suggests, it's possible to use default values but they are applied only to undefined values:
const { credit: { amont } = {} } = userProfile || {};
While null values still result in error, it's necessary to do short-circuit evaluation for all objects that can potentially be nully:
const { credit } = userProfile || {};
const { amont } = credit || {};
This can be addressed with safe navigation utility function that reads the path and checks for nully values.
A renowned example is Lodash get:
const amont = _.get(userProfile, 'credit.amont');
I know one way is to use typescript but here I don't
It's possible to address this with TypeScript only if type safety is guaranteed. If userProfile comes from JSON response, runtime type checks have to be applied to assert that objects aren't null.
You can avoid your app crashes by giving default values while destructing:
const {
credit: { amont } = {},
} = userProfile
console.log(amont); //amont will be undefined
You can later check amont by !!amont where ever you're using it.
In Javascript, a variable can be assigned a default, in the case that the value unpacked from the object / array is undefined. To avoid deep de-structuring read-only property of an object(which is null), you can assign default values like this. In this case an empty object.
