How to avoid destructuring undefined values in JavaScript?

Question

I get response registryReportSettings from server:

this.getRegistrySettings(registry.Id).subscribe((registryReportSettings: { extended: ReportPropertiesRequest }) => {
  const { objectProperties, reportProperties, textProperties } = registryReportSettings?.extended;
}

If it is null I get an error:

TypeError: Cannot destructure property 'objectProperties' of '(intermediate value)(intermediate value)(intermediate value)' as it is undefined.

How to fix it using TS?

Start by properly declaring the type to match the values you're actually getting: { extended: ReportPropertiesRequest | null } — Bergi
– Bergi, Commented Sep 24, 2021 at 2:07

Raz Luvaton · Accepted Answer · 2021-09-24 01:36:12Z

9

The error means that you try to deconstruct a possible undefined (Because you use optional chaining)

You can do

const { objectProperties, reportProperties, textProperties } = registryReportSettings?.extended ?? {};

So you will always deconstruct an object

edited Sep 24, 2021 at 1:36

answered Sep 21, 2021 at 16:46

Raz Luvaton

3,8904 gold badges27 silver badges50 bronze badges

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

2 Comments

pascalpuetz Over a year ago

Consider using nullish coalescing operator ?? instead of ||. In this context it wouldn't make that much of a difference but as soon as you are dealing with primitive values, it will.

Raz Luvaton Over a year ago

You right, I've updated my answer

Collectives™ on Stack Overflow

How to avoid destructuring undefined values in JavaScript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related