Creating variables for destructured objects in addition to their properties

I have:

const { state: { mode } } = this

console.log(mode) //'mode'
console.log(state) //undefined

I want to declare the state variable as well.

Is there a way to destructure this without breaking it into two statements?

const { state } = this
const { mode } = state



Sure, just use a comma as if you were destructing another property of the parent object:

const obj = { state: { mode: 'str' }};
const { state: { mode }, state } = obj;

Note that this looks very similar to, but is not the same as the following import syntax you may have seen:

import React, { Component } from 'react'

Here, the variables in brackets are named exports, while the plain variable is the default export, which is entirely different from nested objects.


You can destructure the state to a variable as well:

const { state, state: { mode } } = { state: { mode: 'mode' } };

console.log(mode) // 'mode'
console.log(state) // { mode: 'mode' }


While all the other answer here suggested a word around to get values, but i am adding this answer to explain why we getting only the deep most nested value

let state = {
    state: {
      mode : 'some value'

const { state: { mode } } = state

When you do nested destructing you will be complied to something like this

var state = {
  state: {
    mode: 'some value'
var mode = state.state.mode;  // this is how your de-structuring is interpreted 

It is not creating a separate variable for each of the property,


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.