Javascript ES6+: Destructuring and using an array method at the same time?

Question

I was wondering if there is a way, to destructe and use an array method at the same time? If yes, is it useful to use it, or would it decrease the code readabilty so much, that it's not worth it?

My current code is this:

const { props: { title, ingredients: ing } } = this;
const ingredients = ing.map(
  (ing, index) => <li key={index}>{ing}</li>
);

But I'm trying to find a shorter way like this:

const { props: { title, ingredients: ingredients.map(
  (ing, index) => <li key={index}>{ing}</li>
); } } = this;

This code doesn't work though. Any tips would be much appreciated! :)

Landry

That last question is very subjective; I would says that yes, it does reduce readability significantly. Keep it simple, stupid. – Neoplasticism

Adding onto @Neoplasticism 's comment, nested destructuring tends to give off that "too clever" feel in cases like this. Might look better as const { title, ingredients } = this.props then maybe name the next variable const ingredientElements. Of course, it's your code, but someone might have to read and understand it later, including your future self 😉 – Nina

No, it's not possible to do this. When you use a destructuring object, the value part of the literal has to be a variable that can be assigned to, or another literal for further destructuring, it can't be an expression. – Etherege

Answer 1

No, this is not possible. Destructuring does just that, it assigns properties to target expressions. Assignment syntax does not have any modifiers for altering the assigned value (default initialisers are already a stretch).

As @kingdaro suggested, use

const { title, ingredients } = this.props;
const ingredientElements = ingredients.map((ing, index) => <li key={index}>{ing}</li>);

Groat

Answer 2

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="rebelclause" data-slug-hash="GVQNOQ" data-preview="true" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
  data-pen-title="Map object keys to vars and populate from values">
  <span>See the Pen <a href="https://codepen.io/rebelclause/pen/GVQNOQ/">
      Map object keys to vars and populate from values</a> by Tim Pozza (<a href="https://codepen.io/rebelclause">@rebelclause</a>)
      on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

soapand = [{
    name: 'far',
    email: 'quad'
  },
  {
    name: 'car',
    email: 'squad'
  }
]

// let {name: `${'wingedAngel'}`, email} = soapand
// global[`wingedAngel`] = `${}`
refreshed = soapand.map((item, idx) => {
  // console.log(item)
  window[`wingedAngel`] = `${item.name}`
  mad = ['holyWater']
  window[`${mad[0]}`] = item.email
  // window['holyWater'] = item.email
  return wingedAngel + ' ' + holyWater
})
// window[`wingedAngel`] = `${soapand[0].name}`
// window['holyWater'] = soapand.email
console.log(refreshed)
console.log(wingedAngel)
console.log(holyWater)

This might help as well, since it distracts on a corner case, namely, being able to use a variable on the left hand side to describe the symbol to which you want to assign a value. When I found this around documentation on String.Raw``, the browser window
object, and node's global object, the corollary to window on the server-side, I felt pretty good about recognizing it. I hope these bits actually address the question as you've asked it. Sorry to those who don't think so. Having this sort of moment seems
to be rare. I hope you'll take the answer in the spirit it is offered, as a chance to share personal discovery where others may have already re-seeded the scene I think is so fresh and new.

Aphotic