Destructuring to get the last element of an array in es6

Question

In coffeescript this is straightforward:

coffee> a = ['a', 'b', 'program']
[ 'a', 'b', 'program' ]
coffee> [_..., b] = a
[ 'a', 'b', 'program' ]
coffee> b
'program'

Does es6 allow for something similar?

> const [, b] = [1, 2, 3]                              
'use strict'                                           
> b  // it got the second element, not the last one!                      
2                                                      
> const [...butLast, last] = [1, 2, 3]          
SyntaxError: repl: Unexpected token (1:17)                                                                                                                                                        
> 1 | const [...butLast, last] = [1, 2, 3]                                                                                                                                                        
    |                  ^                                                                                                                                                                          
    at Parser.pp.raise (C:\Users\user\AppData\Roaming\npm\node_modules\babel\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:24:13)                                           

Of course I can do it the es5 way -

const a = b[b.length - 1]

But maybe this is a bit prone to off by one errors. Can the splat only be the last thing in the destructuring?

Answer 1

console.log('last', [1, 3, 4, 5].slice(-1));
console.log('second_to_last', [1, 3, 4, 5].slice(-2));

Answer 2

I believe ES6 could at least help with that:

[...arr].pop()

Given your array (arr) is not undefined and an iterable element (yes, even strings work!!), it should return the last element..even for the empty array and it doesn't alter it either. It creates an intermediate array though..but that should not cost much.

Your example would then look like this:

  console.log(  [...['a', 'b', 'program']].pop() );

Answer 3

It is not possible in ES6/2015. The standard just doesn't provide for it.

As you can see in the spec, the FormalParameterList can either be:

• a FunctionRestParameter
• a FormalsList (a list of parametes)
• a FormalsList, followed by a FunctionRestParameter

Having FunctionRestParameter followed by parameters is not provided.

Answer 4

You can destructure the reversed array to get close to what you want.

const [a, ...rest] = ['a', 'b', 'program'].reverse();
  
document.body.innerHTML = 
    "<pre>"
    + "a: " + JSON.stringify(a) + "\n\n"
    + "rest: " + JSON.stringify(rest.reverse())
    + "</pre>";

Answer 5

another approach is:

const arr = [1, 2, 3, 4, 5]
const { length, [length - 1]: last } = arr; //should be 5
console.log(last)

Answer 6

Not necessarily the most performant way of doing. But depending on the context a quite elegant way would be:

const myArray = ['one', 'two', 'three'];
const theOneIWant = [...myArray].pop();

console.log(theOneIWant); // 'three'
console.log(myArray.length); //3

Answer 7

Getting the last element of the array:

const [last,] = ['a', 'b', 'program'].reverse();

Answer 8

You can try using object destructuring applied to an array to extract the length and then get last item: e.g.:

const { length, 0: first, [length - 1]: last } = ['a', 'b', 'c', 'd']

// length = 4
// first = 'a'
// last = 'd'

UPDATE

Another approach Array.prototype.at()

The at() method takes an integer value and returns the item at that index, allowing for positive and negative integers...

const last = ['a', 'b', 'c', 'd'].at(-1)
// 'd'

Answer 9

This should work:

const [lastone] = myArray.slice(-1);

Answer 10

const arr = ['a', 'b', 'c']; // => [ 'a', 'b', 'c' ]

const {
  [arr.length - 1]: last
} = arr;

console.log(last); // => 'c'

Answer 11

Not destructing way but could help. According to javascript documentation and reverse method could be try this:

const reversed = array1.reverse();
let last_item = reversed[0]

Answer 12

Does es6 allow for something similar?

No, it is currently not possible, although we may get it in the future, see:

• Double-Ended Iterator and Destructuring

So what can we do in the meantime?

We want:

const [...rest, last] = arr;

For the time being, probably the cleanest approach is:

const arr = [1, 2, 3];

const [rest, last] = [arr.slice(0, -1), arr.at(-1)];

console.log({ rest, last });

which logs: { rest: [ 1, 2 ], last: 3 } and arr is unchanged. It does not create unnecessary copies or intermediate arrays.

Note that .at() is fairly new (as of writing):

• Can I use Array at?

Another approach that does not use arr.at(-1):

const arr = [1, 2, 3];

const rest = [...arr];
const last = rest.pop(); // <-- this mutates rest

console.log({ rest, last });

which logs: { rest: [ 1, 2 ], last: 3 } and arr is unchanged since we made a shallow copy first. It does not create unnecessary copies of arr or intermediate arrays either. However, I do not like the fact that rest is mutated.

If backward compatibility is important, this works even in ES3:

var arr = [1, 2, 3];

var rest = arr.slice();
var last = rest.pop(); // <-- this mutates rest
  
console.log({ rest: rest, last: last });

It is not as elegant as const [...rest, last] = arr; but the code is readable and straightforward in my opinion.

Answer 13

You could further destruct array´s ...rest array as Object, in order to get its length prop and build a computed prop name for the last index.

This even works for parameter destruction:

const a = [1, 2, 3, 4];

// Destruct from array ---------------------------
const [A_first, ...{length: l, [l - 1]: A_Last}] = a;
console.log('A: first: %o; last: %o', A_first, A_Last);     // A: first: 1; last: 4

// Destruct from fn param(s) ---------------------
const fn = ([B_first, ...{length: l, [l - 1]: B_Last}]) => {
  console.log('B: first: %o; last: %o', B_first, B_Last);   // B: first: 1; last: 4
};

fn(a);

Answer 14

let a = [1,2,3]
let [b] = [...a].reverse()

Answer 15

This is the most simple and understandable one I could actually come up with:

    const first = [...arr];
    const last = first.pop();
    const others = first.join(', ');

Answer 16

const arr = [1, 2, 3, 4, 5]; arr[arr.length - 1] = 6;

// => [1, 2, 3, 4, 6]

Answer 17

Definitely, the question is about Destructuring for JavaScript Arrays, and we know it is not possible to have the last item of an Array by using the destructuring assignment, there is a way to do it immutable, see the following:

const arr = ['a', 'b', 'c', 'last'];

~~~
const arrLength = arr.length - 1;

const allExceptTheLast = arr.filter( (_, index) => index !== arrLength );
const [ theLastItem ] = arr.filter( (_, index) => index === arrLength );

We do not mutate the arr variable but still have all the array members except the last item as an array and have the last item separately.

Answer 18

Using array deconstructing: "capturing" the array, "spliced" array (arrMinusEnd), and "poped"/"sliced" element (endItem).

var [array, arrMinusEnd, endItem] = 
  ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]
  .reduce(
    (acc, cv, idx, arr) => {
      if(idx<arr.length-1) acc[1].push(cv);
      else {
        acc[0]=arr;
        acc[2]=cv;
      };
      return acc;
    },
    [null,[],[]]
  )
;

console.log("array=");
console.log(array);
console.log("arrMinusEnd=");
console.log(arrMinusEnd);
console.log("endItem=\""+endItem+"\"");

.as-console-wrapper { max-height: 100% !important; top: 0; }