对同一对象属性进行多次解构

Question

Sometimes I do nested destructing, meaning more than a level, it can be dangerous but I only ensure the property exist otherwise I'll have the property of undefined error .

I did this recently,

const {
        match: {
          params: { id: UserId }
        },
        match
      } = this.props 

and I have doubt whether is good code. I need match.params.id , and I also need the match object, so this duplicated 'variable' is fine?

Answer 1

no do it like this:

const {match} = this.props;
const {params: {id: userId} = {} } = match || {};

Answer 2

Like @Tarek said, that is the better way to do it. Just to check that the object and its properties are indeed valid.

This is also a good opportunity to check out the optional chaining operator! It is an experimental babel plugin that will (hopefully) be added to ES9!

Check it out here!

This is doing exactly what you would want in a much cleaner and simpler way.