Destructuring nullable objects

Question

Typescript (or should we say ES) doesn't allow destructuring of null/undefined objects. It throws TypeError.

So, lets say we have something like

let {a,b,c} = D;

where D could be null.

If we need to do conditional destructuring assignment with null-checks then we create boilerplate code for something that was meant to reduce it.

What is the most elegant way of using it in cases like that or should we use destructuring only for guaranteed non-null objects?

and Typescript does a good job in doing so. Instead of bypassing the type system you should embrace its objectives, which is among other things: Know your types. — , Jul 20 '17 at 10:15
could you please be a bit more explicit? some example? how is type system related to this particular problem? (i am familiar with static typing) — dee zg, Jul 20 '17 at 10:20
With a static type system you should know the types of all your variables. The type of a variable must not change during runtime. I don't know how fancy Typescript's type system is, but at least you should know whether `D` is `null` or an `Object` type. — , Jul 20 '17 at 10:36

Ori Drori · Accepted Answer · 2021-08-24T10:52:20.863

181

You can use an empty object as fallback, and if D is null or undefined the assigned variables will be undefined.

const D = null;
const { a, b, c } = D || {};

console.log(a, b, c);

Using typescript you need to add the correct type (or any) to the FALLBACK object (TS playground). For example:

interface Obj {
    a?: string;
    b?: string;
    c?: string;
}

const D = null;
const { a, b, c } = D || {} as Obj;

console.log(a, b, c);

Another option is to use object spread, since spreading null or undefined results in an empty object (see this SO answer).

const D = null;
const { a, b, c } = { ...D };

console.log(a, b, c);

Using typescript you need to add the types to the variable that you spread, and the object that you destructure. For example (TS Playground):

interface Obj {
    a?: string;
    b?: string;
    c?: string;
}

const D = null;
const { a, b, c } = { ...D as any } as Obj;

console.log(a, b, c);

If you need to handle nested destructuring, use defaults:

const D = null;
const { a, a: { z } = {}, b, c } = { ...D };

console.log(a, b, c, z);

edited Aug 24 '21 at 10:52

answered Jul 20 '17 at 09:15

Ori Drori

3

Any ideas about how to do this well in a sub-object? eg: ``` let a = { b: null }; let { b: { c } } = a; // Uncaught SyntaxError: Invalid destructuring assignment target ``` – Josh Mc Mar 26 '19 at 03:06
8

How about nested restructuring? e.g. `const { z: { b } } = a;` in this case, `z` is undefined – w3debugger Apr 02 '19 at 12:53
1

These options don't work with TypeScript. – Organic Jul 29 '21 at 10:24
I don't know if something about strict type checking changed in Typescript since this answer was posted but as @Organic mentioned these solutions don't work in Typescript currently. When I try to destructure an empty object like this `const { a, b, c } = D || {};` I get an error `Property 'a' does not exist on type '{}'`. – DaDo Aug 24 '21 at 09:17
1

@Dado - Both options work with TS as long as you the add correct types. I've added examples for TS + links to TS Playground. – Ori Drori Aug 24 '21 at 10:53

1 Answers1