This is not necessarily an issue, more a curiosity that came up via an ESLint error which led me to wonder if there was a better way that just disabling ESLint for this line.

Consider the code snippet below. ESLint will give an error if the react/destructuring-assignment rule is enabled, preferring

const { arrayToPrint } = myArrays to const arrayToPrint = myArrays[arrayName]

My question is, and I haven't been able to find any reference to this so I'm guessing not, is there a way to move [arrayName] to the lefthand side of the assignment to destructure without a reference to the actual object property?

const myArrays = {
  arrayOne: ['one'],
  arrayTwo: ['two'],
  arrayThree: ['three'],
}

const arrayPrinter = function arrayPrinter(arrayName) {
	const arrayToPrint = myArrays[arrayName]
  
  return arrayToPrint
}

console.log(arrayPrinter('arrayTwo'))

This is not necessarily an issue, more a curiosity that came up via an ESLint error which led me to wonder if there was a better way that just disabling ESLint for this line.

Consider the code snippet below. ESLint will give an error if the react/destructuring-assignment rule is enabled, preferring

const { arrayToPrint } = myArrays to const arrayToPrint = myArrays[arrayName]

My question is, and I haven't been able to find any reference to this so I'm guessing not, is there a way to move [arrayName] to the lefthand side of the assignment to destructure without a reference to the actual object property?

const myArrays = {
  arrayOne: ['one'],
  arrayTwo: ['two'],
  arrayThree: ['three'],
}

const arrayPrinter = function arrayPrinter(arrayName) {
	const arrayToPrint = myArrays[arrayName]
  
  return arrayToPrint
}

console.log(arrayPrinter('arrayTwo'))

• javascript
• reactjs
• eslint
• destructuring

• For clarity, you can replace function arrayPrinter(arrayName) by arrayName => – Nino Filiu Commented Feb 20, 2019 at 23:13
• 1 What's wrong with let { arrayTwo } = myArrays; let arrayToPrint = arrayTwo;? – Nino Filiu Commented Feb 20, 2019 at 23:15
• @NinoFiliu nothing wrong with that at all, and it's probably a better pattern if I refactor my code, but the question still stands ;) – Ben Commented Feb 20, 2019 at 23:19
• @NinoFiliu actually passing the array itself doesn't end up helping me. The use-case I have is updating the state of a parent ponent from a child, adding to one of several arrays based on a selection in the child ponent, so the child is telling the parent which value to add to which array (in parent state, and shared with other ponents). – Ben Commented Feb 20, 2019 at 23:30
• @Ben you can see this stackoverflow./questions/54605286/… – Code Maniac Commented Feb 21, 2019 at 8:19

2 Answers 2

Destructuring can be done with puted property:

const { [arrayName]: arrayToPrint } = myArrays;

A simply way to do that is to use Object.entries(myArrays) .

/* example: expected output of console.log(Object.entries(myArrays)[1]) is ["arrayTwo": Array ["two"]]