cannot read property of null doing destructing

Question

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.

If you aren't sure of your data structures, then yeah, don't do this. — deceze, Aug 28 '18 at 13:27

score 46 · Accepted Answer · answered Aug 28 '18 at 14:04

46

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.

answered Aug 28 '18 at 14:04

Estus Flask

206,104
70
425
565

1

so avoid `null` at all cost? – Hoknimo Aug 30 '18 at 02:38
@Hoknimo Yes, it's less practical than undefined for destructuring. But since you may get it from some sources (e.g. there's no undefined in JSON), you have to deal with null any way. – Estus Flask Aug 30 '18 at 10:30
then avoid nested destructuring? because looking at the api response I couldn't tell whether there will be undefined object property at all. – Hoknimo Aug 30 '18 at 12:53
Yes, destructuring isn't useful here. You need to process response first, e.g. replace null with undefined and possibly other changes if your data structure differs from API response. – Estus Flask Aug 30 '18 at 19:17

Sakhi Mansoor · Answer 2 · 2018-08-28T13:40:13.093

3

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.

edited Aug 28 '18 at 13:40

answered Aug 28 '18 at 13:34

Sakhi Mansoor

7,832
5
22
37

1

This won't work if `credit` is null like the question suggests. – Estus Flask Aug 28 '18 at 13:48
it works you can try it too. Even we save app crashes for nested objects while destructing. – Sakhi Mansoor Aug 28 '18 at 13:49
1

There's no need to try it to know that it won't, `const { credit: { amont } = {}, } = { credit: null }`. Default value is applied only to `undefined`. Not `null`. – Estus Flask Aug 28 '18 at 13:50
you mean app will still crash ? – Sakhi Mansoor Aug 28 '18 at 13:56
1

Sadly, yes, this can't be achieved with destructuring alone. – Estus Flask Aug 28 '18 at 14:05

score 1 · Answer 3 · answered Jan 27 '22 at 18:30

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.

atazmin · Answer 4 · 2022-11-01T11:21:10.927

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);

if data array is empty

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

cannot read property of null doing destructing

4 Answers4