ES6 double destructure

I understand this probably is a pretty basic question, but I'm not proficient with ES6 and I've encountered this syntax:

const { rootStore: { routerStore } } = this.props;

I understand what something like this means:

const { rootStore } = this.props;

(Creating a const rootStore from the property rootStore in this.props).

But what does the above double deconstruction (I assume it's deconstruction) mean?

5 answers

  • answered 2018-06-23 09:56 Ruby Ybur

    It means

    const {rootStore} = this.props
    const {routerStore} = rootStore
    

    Except the first line will not effect, which is rootStore will not be defined.

  • answered 2018-06-23 09:56 Nina Scholz

    It separates routerStore from

    this.props.rootStore.routerStore
    

    by taking nested objects for a destructuring assignment.

  • answered 2018-06-23 09:58 Ry-

    When destructuring an object, the part on the left side of the colon is the property name and the part on the right side is what the property value is destructured into. (Shorthand works as it does in an object literal, where { x } is equivalent to { x: x }.) This target is declared or assigned to according to where the destructuring appears:

    const { x: y } = z;
    // equivalent to:
    const y = z.x;
    
    let { x: y } = z;
    // equivalent to:
    let y = z.x;
    
    ({ x: y }) = z;
    // equivalent to:
    y = z.x;
    

    where y can be another pattern. So this:

    const { rootStore: { routerStore } } = this.props;
    

    is equivalent to:

    const { routerStore } = this.props.rootStore;
    

    which is also how I would write it if only using the one property. You can read the colon as “into” if that helps.

  • answered 2018-06-23 10:10 Inus Saha

    const { rootStore: { routerStore } } = this.props;

    Just to add my part, the above code actually means the following

    const { routerStore } = this.props.rootStore;

    not the following:

    const {rootStore} = this.props
    const {routerStore} = rootStore
    

    the difference is that the first one only defines one constant routerStore whereas the second one defines two constants rootStore and routerStore. so there is little difference.

  • answered 2018-06-23 10:11 mostafa tourad

    This is called nested destructuring and its very useful in many situations

    let's understand it bit by bit ,

    look at this example

    const person = {
        friend: {
            name: 'john',
            age: 20,
        },
    };
    
    const { friend } = person;
    
    console.log(friend);

    here we get the value of the prop friend using destructuring and the value itself is an object and we can use destructring with it as well ,

    from the previous example

    const person = {
        friend: {
            name: 'john',
            age: 20,
        },
    };
    
    const { friend } = person;
    
    console.log(friend);
    
    const {age} = friend ;
    
    console.log(age) ; 

    now we get the age prop using destructuring as well and that's pretty and super handy , but what if I just need the age prop and I don't need the friend prop , can I do all the above example in one step , Yes !! and that's the awesomeness of ES6 ,

    const person = {
        friend: {
            name: 'john',
            age: 20,
        },
    };
    
    const { friend :{age} } = person;
    
    console.log(age); 

    as you can see we get the value of age in one step and that's useful in many situations when you have nested objects , in the code above if you try to log the value of friend you'll get ReferenceError: friend is not defined ,

    Did you know ? you can make deep nested destructuring as you want , look at this complex example which is just for fun .

    const person = {
        friend: {
            name: 'john',
            other: {
                friend: {
                    name: {
                        fullName: {
                            firstName: 'demo',
                        },
                    },
                },
            },
        },
    };
    
    const {
        friend: {
            other: {
                friend: {
                    name: {
                        fullName: { firstName },
                    },
                },
            },
        },
    } = person;
    
    console.log(firstName); // demo

    pretty !!

    if you want to know everything about destructuring look at this resources

    Destructuring assignment MDN

    Destructuring and parameter handling in ECMAScript 6