How to Get the Last Element of an Array in Javascript (4 ways)
Jasser Mark Arioste
In this tutorial, you'll learn how to get the last element of an array in Javascript.
What is an Array in Javascript? #
A javascript array is a collection of values or objects stored under a single variable or constant. Javascript arrays are resizable by default, meaning there is not a fixed number of elements. You can initialize an empty array at the start but add more elements afterward.
How to Get the Last Element of An Array #
As of ECMAScript 2022, there are currently four different methods to get the last element of an array:
- Using .length property and bracket notation
- Using Array.prototype.slice() method
- Using Array.prototype.at() method
- Using Array.prototype.pop() method
We'll discuss them one by one.
Using .length property and bracket notation
#
Using .length property and bracket notation is one of the most basic ways to access an element in an array. To get the last element, we have to get its index/number first, then use the bracket notation to get the value:
const array = ["a", "b", "c", "d", "e"]; const lastElementIndex = array.length - 1; // get the index of the last element const lastElement = array[lastElementIndex] // use bracket notation get the value of the last element123
Explanation:
Since arrays are zero-indexed which means that the first element has an index of 0, this means that the index of the last element is one less than the length of an array. Once you get the index, you get the value using the bracket notation.
Using Array.prototype.slice() method
#
The Array.prototype.slice method returns a shallow copy of the array into a new Array object. It accepts two optional arguments start & end which specifies the index of which part of the array will be copied into a new array.
It can also accept negative values which -1 is the last element of an array. Here's an example of how to get the last element:
const array = ["a", "b", "c", "d", "e"]; const newArray = array.slice(-1) // ["e"] //slice the last element into a new array const lastElement = newArray[0] //use bracket notation to access the only element.123
In this example, we converted an array of multiple elements into an array of a single element. But we still had to use bracket notation to access the value.
Using Array.prototype.at() method
#
The Array.prototype.at() method which was introduced in ECMAScript 2022, accepts a single argument index, and returns the element of that index. For example:
const array = ["a", "b", "c", "d", "e"]; const lastElementIndex = array.length - 1; const lastElement = array.at(lastElementIndex) //"e"123
It's pretty similar to using bracket notation but the advantage is that it accepts negative index arguments similar to slice. So instead of two steps, you use -1 index to get the last element:
const array = ["a", "b", "c", "d", "e"]; const lastElement = array.at(-1) // use neg12
Using Array.prototype.pop() method
#
The Array.prototype.pop() method removes the last element of an array and returns it. It also modifies the original array.
const array = ["a", "b", "c", "d", "e"]; const lastElement = array.pop() //"e" //The original array is modified. console.log(array) // ["a", "b", "c", "d"]1234
Which method should you use? #
I think the factors that decide which one to use are performance and ECMAScript version support.
I tested each method on a Chrome v12 Browser to see which one is the fastest by using the following code:
let array = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"] console.time('bracket-notation'); let lastElement = array[array.length - 1]; console.log(lastElement); console.timeEnd('bracket-notation'); console.time('Array.prototype.slice'); let arr = array.slice(-1); let lastElement2 = arr[0] console.log(lastElement2); console.timeEnd('Array.prototype.slice'); console.time('Array.prototype.at'); let lastElement3 = array.at(-1); console.log(lastElement3); console.timeEnd('Array.prototype.at'); console.time('Array.prototype.pop'); let lastElement4 = array.pop(); console.log(lastElement4); console.timeEnd('Array.prototype.pop');12345678910111213141516171819202122
Below are the results:
| Method | Execution speed |
|---|---|
| bracket-notation | 0.108154296875 ms |
| Array.prototype.slice | 0.038818359375 ms |
| <b>Array.prototype.at</b> | <b>0.01513671875 ms</b> |
| Array.prototype.pop | 0.016357421875 ms |
If you're using typescript (which allows you to use the latest ECMAScript versions) or support the latest browser versions, it's best to use the Array.prototype.at method.
Conclusion #
You learned four different ways to get the last element of an array in Javascript and see which one is the fastest out of the four.
If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on GitHub.
Resources #
Credits: Image by Sergio Cerrato - Italia from Pixabay
