To my understanding, JavaScript arrays can be destructured according to a specific index by doing the following.
const { 3: selectedByIndex } = arr;
This would assign the value of the element at index 3 to the variable selectedByIndex.
Is there a way to pass in a variable index value to destructure the array? The below does not work, it seems to instead look for the index property on arr.
const index = 3;
const arr = [1, 2, 3, 4, 5]
const { index: selectedByIndex } = arr;
Yes, you can by setting index inside the square brackets.
const index = 3;
const arr = [1, 2, 3, 4, 5]
const { [index]: selectedByIndex } = arr;
console.log(selectedByIndex)While this works
const a = [1, 2, 3];
const index = 2;
const [,,v1] = a;
// v1 = 3
const { [index]: v2 } = a;
// v2 = 3
The second solution (v2) is a bad design practice, because an array is not an object, but you are accessing it as one.
A better solution would be either
const v3 = a[index];
const v4 = a?.[index];
In other words, destructuring is when you know the format of the data structure. If not, JavaScript arrays don't care if you try to get an out-of-bound value, unless the value is not an array, in which case you need optional chaining (e.g. v4).
To clarify what I meant by the second solution being a "bad design practice", consider this benchmark:
// tested on Chrome 105 Firefox 105
let value = list[index]; // fastest, base fastest, base
let value = list?.[index]; // 2.52% slower 3.74% slower
let { [index]: value } = list; // 47.72% slower 30.76% slower
It's not because a feature exist, and it works, that 1) it's efficient or 2) it's a good design choice. After all, I can certainly hit a nail with a pipe wrench, but there are better tools for the job.
When the previous edit was added, Array.at was still not generally adopted, however now it is.
const v5 = a.at(index);
This is the preferred way because it is a disambiguation from accessing object properties.
For example:
const i = 1;
const p = 'find';
// old
const v6 = a[i]; // 2
const v7 = a[p]; // 'find() [native code]' (same as a.find)
// new
const v8 = a.at(i); // 2
const v9 = a.at(p); // 1 (same as a.at(0)
The new API protects from returning unwanted values by accessing undesired properties.
Bonus: a.at(-2) is the same as a[a.length - 2]
"The second solution (v2) is a bad design practice, because an array is not an object...". I don't think that is a bad practice. Arrays in JavaScript are Objects like almost everything in JavaScript.
The same way you pass a variable key when creating an object -- put it in [].
const index = 3;
const arr = [1, 2, 3, 4, 5]
const { [index]: selectedByIndex } = arr;
console.log(selectedByIndex);But unless this is just a part of a more complex destructuring pattern, arr[index] is obviously simpler.
// the correct destructuring of arrays
let arr=[12,34,55,78]
const[first,_,second]=arr
console.log(first,second) // 12 55
_.
const selectedByIndex = arr[index];too "old skool" for kids these days? ;-)