How to destructure nested object with null value using default value

Question

When trying to destructure a nested object which could be null, the default value is not being used.

I have accomplished this by destructuring in multiple stages, but would rather do it in a single stage if possible.

const obj = { a: null };
const { a: { b, c } = {} } = obj;

This results in error:
Cannot destructure property 'b' of 'undefined' or 'null'

I would expect b and c to be undefined

How can you destructure something that does not exist? You would have to set the object to be intialized const obj = { a: { b, c} } — Michael
– Michael, Commented May 13, 2019 at 8:58
@AZ_ The default value is denoted by = {} on the second line of code. So, if a is undefined, an empty object will be destructured instead. — ut9081
– ut9081, Commented May 13, 2019 at 9:32
@Michael That is the purpose of the = {}. So if a is undefined, an empty object will be used for the purpose of the destructuring. — ut9081
– ut9081, Commented May 13, 2019 at 9:36
Ok, default value only assigned if the property does not exist(undefined). — Naren
– Naren, Commented Sep 10, 2021 at 14:42

ut9081 · Accepted Answer · 2019-05-13 13:35:59Z

19

For the default value to be used, the value which you are destructuring must be undefined.

const obj = { a: undefined };
const { a: { b, c } = {} } = obj;

console.log(b, c)

edited May 13, 2019 at 13:35

ut9081

1,4121 gold badge11 silver badges11 bronze badges

answered May 13, 2019 at 8:59

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sean Over a year ago

But if a is null instead of undefined, this doesn't work.

Maheer Ali · Accepted Answer · 2019-05-13 09:06:38Z

0

You can change null to empty object in a temporary object. Using map() on entries of object change null to empty object {} and then convert it to object using Object.fromEntries

const obj = { a: null };
const { a: { b, c } = {} } = Object.fromEntries(Object.entries(obj).map(x => x[1] === null ? {} : x));

console.log(b,c)

edited May 13, 2019 at 9:06

answered May 13, 2019 at 8:59

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Comments

adiga · Accepted Answer · 2019-05-13 09:30:38Z

-1

Your code looks like this after transpiling:

var obj = { a: null };
var _obj$a = obj.a;
_obj$a = _obj$a === void 0 ? {} : _obj$a;
var b = _obj$a.b,
    c = _obj$a.c;

Here _obj$a is the temporary variable referencing obj.a. If a default value is provided, it will only check this value against void 0 (or undefined) and not against null

You can still do this using destructuring. But, a traditional null and undefined check is much easier to understand.

let obj = { a: null },
  a = obj.a,
  b, c;

if (typeof a !== "undefined" && a !== null) {
  b = obj.a.b;
  c = obj.a.b;
}

edited May 13, 2019 at 9:30

answered May 13, 2019 at 9:12

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Comments

Gagandeep V · Accepted Answer · 2023-07-06 08:26:54Z

-1

You can use destructuring twice and get the required output -

const { a = {} } = { a: null }
const { b = '', c = '' } = a || {}

answered Jul 6, 2023 at 8:26

Gagandeep V

1

Collectives™ on Stack Overflow

How to destructure nested object with null value using default value

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related