如何使用默认值使用null值来构造嵌套对象

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

Answer 1

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) 

Answer 2

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) 

Answer 3

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