Javascript (React + Flow) - Destructuring with nullable nested objects

Question

I'm trying to destruct an object that can be null at a moment. For example with the following :

const { dolphin } = this.props.route.params;

I want dolphin to return null if route or params is null.

But whatever i try, i always got the exception "Cannot read property 'dolphin' of undefined.

Can anyone as a tip for this please ? Thanks

score 2 · Answer 1 · answered Jul 27 '20 at 16:40

Using nullish coalesce, optional chaining, and default value:

function test(x) {
  this.props = x;
  const { dolphin = null, whale = null } = this.props.route?.params ?? {};
  return { dolphin, whale };
}

console.log(test({
  route: {
    params: null
  }
}))

console.log(test({
  route: null
}))


console.log(test({
  route: { params: { dolphin: 1, whale: 2 } }
}))

Please make sure to note the compatibility table at the bottom for browsers. If you are using babel you should be okay. Since you are using React and Flow, you are probably already using browser targeted transpilation with Babel, so it shouldn't be an issue.

score 1 · Accepted Answer · answered Jul 27 '20 at 16:31

1

The closest you're going to get with a one-line destructuring assignment is this:

const { dolphin } = this.props.route?.params || { dolphin: null };

But it doesn't return null only if .route or .params is null; it does so if they are any falsy value.

answered Jul 27 '20 at 16:31

GirkovArpa

4,427
4
14
43

And what if i have multiple const ? Like dolphin, squirrel, etc... Can i have a one-line destructuring assignment ? – Prozedsq Jul 27 '20 at 16:39
Yes, just separate them with commas. – GirkovArpa Jul 27 '20 at 16:41

Javascript (React + Flow) - Destructuring with nullable nested objects

2 Answers2