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!

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!

• javascript
• ecmascript-6
• destructuring

2 Answers 2

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)

 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;