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?

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?

• javascript
• reactjs
• ecmascript-6
• destructuring

• 1 Does this answer your question? Is it possible to do conditional destructuring or have a fallback? – ksav Commented Mar 4, 2020 at 2:45
• i've actually seen that post and I have the empty object {} as the fallback value as well for 'gallery', but I'm still getting the null is not an object error – Kevvv Commented Mar 4, 2020 at 2:49
• I think I'd be more tempted to ask the question, is this maybe a bit TOO destructured. That's going to be a bit difficult to grok later on. – jcreamer898 Commented Mar 4, 2020 at 2:49
• 1 Default values are applied only if the destructured value is undefined. Since it looks like it's null in your case, default value are useless. – Emile Bergeron Commented Mar 4, 2020 at 3:13

1 Answer 1

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