How to conditionally destructure on object?

user_10116367 0
Viewed 5518

I have the following destructuring:

const {
    user: {
        username,
        image,
        uid
    } = {},
    gallery: {
        image: picture,
    } = {},
} = data

The problem is gallery is sometimes null (not the picture within gallery), even though what I need is the picture within gallery when it exists. In other words, gallery: null, not gallery.image: null.

Therefore, I get:

null is not an object

error message for gallery.image.

How do I conditionally destructure so that gallery.image is used when it exists, but gallery isn't destructured when null?

reactjs destructuring ecmascript-6 javascript
1 Answers

Fallbacks only work when the value is undefined but not null

  • This will work:

const data = {
  user: {
    username: 'Alice',
    image: 'alice.png',
    uid: 1
  },
  gallery: undefined
};

const {
    user: {
        username,
        image,
        uid
    } = {},
    gallery: {
        image: picture,
    } = {},
} = data;

console.log(username, image, uid, picture);

  • But this won't:

const data = {
  user: {
    username: 'Alice',
    image: 'alice.png',
    uid: 1
  },
  gallery: null
};

const {
    user: {
        username,
        image,
        uid
    } = {},
    gallery: {
        image: picture,
    } = {},
} = data;

console.log(username, image, uid, picture);

So, you can manually create a fallback from null to {} before you destructing it like this:

const data = {
  user: {
    username: 'Alice',
    image: 'alice.png',
    uid: 1
  },
  gallery: null
};

const {
    user: {
        username,
        image,
        uid
    } = {},
    gallery: {
      image: picture,
    }
} = {...data, gallery: data.gallery || {}};

console.log(username, image, uid, picture);

user_102892650
Related