ReactHustle

How to Get the Last Element of an Array in Javascript (4 ways)

Jasser Mark Arioste

Jasser Mark Arioste

How to Get the Last Element of an Array in Javascript (4 ways)

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:

  1. Using .length property and bracket notation
  2. Using Array.prototype.slice() method
  3. Using Array.prototype.at() method
  4. 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 element
123

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 neg
12

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:

MethodExecution speed
bracket-notation0.108154296875 ms
Array.prototype.slice0.038818359375 ms
<b>Array.prototype.at</b><b>0.01513671875 ms</b>
Array.prototype.pop0.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

Share this post!

Related Posts

Disclaimer

This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle