Destructuring of es6 but passing dynamic variable

Question

Says my state is like this:

{
  item:{
      a:'a',
      b:'b'
  }
}

Then I'm able to pull a from item by doing:

const { a } = this.state.item

but can pull dynamically using {} of es6 ?

For example const { variable } = this.state.item, where variable can be a or b.

You can't re-define a `const` to have a different value. What variable should hold the output? I looks like you will need [computed property destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Computed_object_property_names_and_destructuring) — 4castle, Mar 08 '17 at 07:12

score 26 · Accepted Answer · edited May 23 '17 at 11:53

26

As 4castle pointet out, you could use Computed object property names and destructuring with an additional key/value pair variables for destructuring.

var object = { item: { a: 'a0', b: 'b0' } },
    key = 'b',
    value;

({ [key]: value } = object.item);

console.log(value);

edited May 23 '17 at 11:53

Community

1
1

answered Mar 08 '17 at 07:31

Nina Scholz

376,160
25
347
392

this is way too complicated, i rather just do if else and assign it to a normal variable. – Alex Yong Mar 08 '17 at 08:25
8

you asked for destructuring. the rest is up to you. – Nina Scholz Mar 08 '17 at 08:27
2

@AlexYong Destructuring will only make sense if you need to do this with more than one property at a time. Otherwise, you might as well do `const value = object.item[key];` – 4castle Mar 08 '17 at 22:05
Exactly how to use a variable when destructuring – gdibble Dec 16 '21 at 07:16

score 1 · Answer 2 · answered Sep 28 '22 at 05:30

1

const handleChange = (e) => {
        const { name, value } = e.target;
        const { [name]: property, ...rest } = coupon;
        setNewValue({ [name]: value, ...rest });
    }

answered Sep 28 '22 at 05:30

N I Rimon

36
4

Destructuring of es6 but passing dynamic variable

2 Answers2

Linked

Related