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!

Answer 1

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) 

Answer 2

 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;