Javascript (ES6), destructure based off variable

Question

I am wondering to see if there is a way to destructure objects in javascript with using a variable. Where as I was doing something like this in my function -

mutateTaxon(data) {
    const { content } = data;
    const { plp } = content || {};
    ...

This was working fine, however I need to expand this function based off another factor that can change if I need to use data.content (which it is using now) or data.collection. So I have another node on the data - which changes call to call. I am trying something like this -

mutateTaxon(data) {
    const match = lowerCase(data.taxonomy.name);
    const { match } = data;
    const { plp } = match || {};

Where that match variable would evaluate to either content or collection (as expected). This does not seem to work however, maybe it is not possible? I was thinking maybe the match var needed to be evaluated so I tried something like -

const { [[match]] } = data;

which also is not working. Maybe this is not possible, or I am approaching this wrong. I am wondering, is something like this possible? Thanks!

Patrick Roberts · Accepted Answer · 2018-04-05 15:45:18Z

8

The destructuring syntax would, as Jonas W. said, be a bit more cumbersome than the bracket notation, but nonetheless, this is how you would do it:

mutateTaxon(data) {
  const key = lowerCase(data.taxonomy.name);
  const { [key]: { plp } = {} } = data;

Demo

const foo = { bar: { plp: 'success' } }
const key = 'bar'
const { [key]: { plp } = {} } = foo

console.log(plp)

And to confirm that default parameter = {} works as expected:

const foo = { }
const key = 'bar'
const { [key]: { plp } = {} } = foo

console.log(plp)

edited Apr 5, 2018 at 15:45

answered Apr 5, 2018 at 15:16

Patrick Roberts

52.4k10 gold badges120 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Patrick Roberts Over a year ago

@JonasW. wow, didn't mean to steal the spotlight. I was actually about to delete my answer when I noticed you edited and then I got a flood of upvotes o.o;

Jonas Wilms Over a year ago

people love snippets :), and nevermind, zwei dumme ein gedanke :)

evolutionxbox Over a year ago

I was about to ask about the feasibility of dynamic properties inside object literals, but then the OP is using destructuring.

Jonas Wilms · Accepted Answer · 2018-04-05 15:16:27Z

7

 const key = lowerCase(data.taxonomy.name);
 const match = data[key];

I dont think that object destructuring is useful here. But if you need that:

  const key = lowerCase(data.taxonomy.name);
  const {[key]: match} = data;

edited Apr 5, 2018 at 15:16

answered Apr 5, 2018 at 15:13

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

5 Comments

ajmajmajma Over a year ago

This is the desired result for sure, I am just curious if you can destructure based off a var. Thanks!

evolutionxbox Over a year ago

@ajmajmajma you can. const { content } = data is exactly that.

Jonas Wilms Over a year ago

@ajmajmajma actually you can, just looked that up :)

ajmajmajma Over a year ago

@evolutionxbox no that's not what I mean. The payload returns data.taxonomy.name which is either content or collection. That being dynamic and destructing based on that. Otherwise i could just do const { content, colleciton } = data - see above answers

T.J. Crowder Over a year ago

@ajmajmajma: See Nina's comment, the question is unclear.

Collectives™ on Stack Overflow

Javascript (ES6), destructure based off variable

2 Answers 2

Demo

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related