CODEWITHSUNDEEP
javascriptreactjsecmascript-6destructuring
Hoknimo
Hoknimo

Reputation: 553

cannot read property of null doing destructing

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.

Upvotes: 21

Views: 16157

Answers (4)

atazmin
atazmin

Reputation: 5687

This worked for me when, data[0].attributes.artist.data === null

  const {
    id: artworkArtistId,
    attributes: { name: artworkArtistName, slug: artworkArtistSlug } = {},
  } = data[0].attributes.artist.data || {};

  console.log("artworkArtistId", artworkArtistId);
  console.log("artworkArtistName", artworkArtistName);
  console.log("artworkArtistSlug", artworkArtistSlug);

enter image description here

if data array is empty

  const {
    images: { data: images } = { data: [] },
  } = props.props || {};

Upvotes: 1

Saura Mandal
Saura Mandal

Reputation: 59

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.

enter image description here

Upvotes: 1

Estus Flask
Estus Flask

Reputation: 222369

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.

Upvotes: 49

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8102

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.

Upvotes: 3

Related Questions