Learn different methods to get the last element of the array in Javascript and choose the most performant one for your project.
How to Get The Last Item of The Array
To get the last item of the array, we need to access that item by its index.
For instance:
let myBasket = ["🥭 mango", "🍞 bread", "🥛 milk", "🥚 egg"];
console.log(myBasket[3]); // last item of the array
// "🥚 egg"
In this article, we are going to take a look at different methods to get the last item of the array, performance benchmark, and choose the right one for our project.
TL;DR
Compared to all other methods, This one seems to be the fastest.
// create an array with 1 million items
let largeArr = Array(1000000)
.fill("item ")
.map((item, i) => item + i);
let lastItem = largeArr[largeArr.length - 1];
console.log(lastItem);
// "item 999999"
1. Get the Last Item of an Array Using The length Property
This is the first solution I came across when I started learning Javascript, and it turns out to be the most performant one as well.
The length property of an object (instance type of Array), returns the number of items in the array.
let myBasket = ["🥭 mango", "🍞 bread", "🥛 milk", "🥚 egg"];
console.log(myBasket.length); // 4
let lastItem = myBasket[myBasket.length - 1];
console.log(lastItem);
// "🥚 egg"
2. The at() Method to Get The Last Item of The Array
The at() method is rather new to the game. It takes an integer and returns the item at that index.
If you use negative integers, it counts back from the last item in the array. arr.at(-1) returns the last item in the array and arr.at(-2) returns second to last item.
let myBasket = ["🥭 mango", "🍞 bread", "🥛 milk", "🥚 egg"];
let lastItem = myBasket.at(-1);
console.log(lastItem);
// "🥚 egg"
console.log(myBasket.at(-2));
// "🥛 milk"
NOTE
At the time of writing this article, The IE, Opera, and Safari browsers do not support this method.
Check the browser compatibility for the at() method
3. Using The pop() Method
We can pop the last item out of the array with the pop() method. However, Note that the original array will be modified.
let myBasket = ["🥭 mango", "🍞 bread", "🥛 milk", "🥚 egg"];
let lastItem = myBasket.pop();
console.log(lastItem);
// "🥚 egg"
console.log(myBasket);
// ["🥭 mango", "🍞 bread", "🥛 milk"];
To avoid mutation, we can use the ...spread operator. It’s more ES6 way of doing it and does not modify the original array.
let myBasket = ["🥭 mango", "🍞 bread", "🥛 milk", "🥚 egg"];
let lastItem = [...myBasket].pop();
console.log(lastItem);
// "🥚 egg"
console.log(myBasket);
// ["🥭 mango","🍞 bread","🥛 milk","🥚 egg"]
4. Get The Last Item of The Array With slice() Method
The slice() method returns a copy of the portion of an array into a new array. It accepts start and end arguments as the index of items in the array. This method does NOT modify the original array.
Since the slice() method returns an array, we have to access its first item by using array[0].
let myBasket = ["🥭 mango", "🍞 bread", "🥛 milk", "🥚 egg"];
let lastItem = myBasket.slice(-1);
console.log(lastItem);
// ["🥚 egg"]
console.log(lastItem[0]);
// "🥚 egg"
Extra
If you are wondering how the slice() method works, you can take a look at this:
let myBasket = ["🥭 mango", "🍞 bread", "🥛 milk", "🥚 egg"];
console.log(myBasket.slice(1, 3)); // starts at index 1 and ends on index 3
// ["🍞 bread","🥛 milk"]
// slicing an array backward, gives Tenet vibes ⏳
console.log(myBasket.slice(-4, -2)); // starts at index -4 and ends on index -2
// ["🥭 mango","🍞 bread"]
5. Get The Last Item of The Array With splice() Method
I’m not a big fan of using this method, but it is nice to understand how it works. The splice() method can remove and replace existing elements, it can also add new elements in place. It is important to know, the method splice() modifies the original array.
First, let’s take a look at the syntax:
splice(start, deleteCount, item1, item2, itemN);
start is the index at which we want to start changing the array.
deleteCount (optional) is the number of elements in the array which we want to remove.
items (optional) are the elements we will add to the array, beginning from start.
let myBasket = ["🥭 mango", "🍞 bread", "🥛 milk", "🥚 egg"];
myBasket.splice(1, 2, "🍇 grapes");
console.log(myBasket);
// ["🥭 mango","🍇 grapes","🥚 egg"]
In the example above, we started at index 1, deleted 2 items beginning at index 1. Then added the new item "🍇 grapes" to the array.
Now that we have a basic understanding of the splice() method, let’s get the last item of the array.
let myBasket = ["🥭 mango", "🍞 bread", "🥛 milk", "🥚 egg"];
let lastItem = myBasket.splice(-1, 1);
console.log(lastItem);
// ["🥚 egg"]
console.log(myBasket);
//["🥭 mango","🍞 bread","🥛 milk"]
console.log(lastItem[0]);
// "🥚 egg"
The Performance Benchmark
With so many methods available to get the last item of the array in Javascript, I thought about running a quick test on JSBench.me . You can run the performance benchmarks for yourself.
Performance results
Using the length property to get the last item of the array appears to be the fastest amongst other methods. The spread operator slows the process down significantly.