3

Suppose I have an array like this: [2, 4, 6, 8, 10].

I want to access the first and last element of this array using destructuring, currently I'm doing this:

const array = [2, 4, 6, 8, 10];
const [first, , , , last] = array;
console.log(first, last);

But this is only works with arrays of length 5 and is not generic enough.

In Python I could do something like this:

array = [2, 4, 6, 8, 10]
first, *mid, last = array
print(first, last)

But in JS this is not possible since rest elements should be the last. So, is there some way to do this in JS or this is not possible?

SSM
  • 2,855
  • 1
  • 3
  • 10
mockuser
  • 41
  • 3

3 Answers3

4

You can use object destructuring and grab the 0 key (which is the first element) and rename it to first & then using computed property names you can grab the array.length - 1 key (which is the last element) and rename it to last.

const array = [2, 4, 6, 8, 10];
const { 0: first, [array.length - 1]: last } = array;
console.log(first, last);

You can also grab the length via destructuring and then use that to grab the last element.

const array = [2, 4, 6, 8, 10];
const { length, 0: first, [length - 1]: last } = array;
console.log(first, last);

Another simple approach to access the last element would be to use the Array.prototype.at method. This is not related to destructuring but it's worth knowing.

const array = [2, 4, 6, 8, 10];
console.log(array.at(-1));
SSM
  • 2,855
  • 1
  • 3
  • 10
2

Not necessarily using destructuring, but still concise in my opinion:

const arr = [1, 2, 3, 4, 5];
const [ first, last ] = [ arr.at(0), arr.at(-1) ];

console.log(first, last);
Cerbrus
  • 70,800
  • 18
  • 132
  • 147
Tomer Ariel
  • 1,397
  • 5
  • 9
  • You can simply `console.log(arr.at(0), arr.at(-1))`, why unnecessarily create an array and destructure from it? – SSM Jun 15 '22 at 08:28
  • @SSM: Because OP probably isn't _just_ destructuring those items to log them. In this case, the array wrapper helps keep the variable declaration in a single line. – Cerbrus Jun 15 '22 at 08:30
  • @Cerbrus You can store them in variables, `const first = arr.at(0), last = arr.at(-1)`, there's no point creating an array unnecessarily. – SSM Jun 15 '22 at 08:32
  • I don't think you should be criticising the validity of someone's answer when your answering with a convoluted destructuring approach, yourself, @SSM. – Cerbrus Jun 15 '22 at 08:33
  • The OP is regarding destructuring and whether it's possible using JS or not? It's *not* about accessing the last element of the array. And I never said the answer is *not* valid, I simply pointed out the unnecessary creation of an array. – SSM Jun 15 '22 at 08:36
  • @SSM: Read the question's title again... – Cerbrus Jun 15 '22 at 08:38
  • 1
    BTW, another alternative would be to simply use a function: `const getHeadAndTail = arr => ({ first: arr.at(0), last: arr.at(-1) });` – Tomer Ariel Jun 15 '22 at 08:45
  • Thanks for the answer. Could you please add typescript version of it? since I am getting "Type 'number | undefined' is not assignable to type 'number'" error, as "arr.at(0)" sometimes can be undefined as well. – johannesMatevosyan May 13 '23 at 05:23
-1

No, you can't use destructuring like that without convoluted workarounds.
A shorter, more readable alternative is to just pop:

const array = [2, 4, 6, 8, 10];
const [first, ...middle] = array;
const last = middle.pop();

console.log(first, middle, last);

Or, just access them by index:

const array = [2, 4, 6, 8, 10];
const first = array[0];
const last = array[array.length - 1];

console.log(first, last);
Cerbrus
  • 70,800
  • 18
  • 132
  • 147