DEV Community

Cover image for Removing the last element of an array in Javascript
Johnny Simpson
Johnny Simpson

Posted on • Originally published at fjolt.com

3

Removing the last element of an array in Javascript

One of the most frequent operations we perform on an array is removing the last element. There are a few different ways to do this - but one of the most common is to use the pop() method. Consider you have the following array:

let myArr = [ "🍎", "🍏", "🍐", "🍍" ];
Enter fullscreen mode Exit fullscreen mode

To remove the last element, all we have to do is apply pop():

let myArr = [ "🍎", "🍏", "🍐", "🍍" ];
myArr.pop();
console.log(myArr); // [ "🍎", "🍏", "🍐" ]
Enter fullscreen mode Exit fullscreen mode

Notice here that this removes the last element and modifies the original array. We have permanently changed the original array by using pop().

Another common method is to use the splice method. Again, splice will modify the original array, and works in much the same way. There is no real reason to use one over the other:

let myArr = [ "🍎", "🍏", "🍐", "🍍" ];
myArr.splice(-1);
console.log(myArr); // [ "🍎", "🍏", "🍐" ]
Enter fullscreen mode Exit fullscreen mode

Finally, another way to accomplish this without changing the original array is to use slice (not to be confused with splice). slice() differs from both pop() and splice() in that it makes a shallow copy of the original array. Removing the last element with slice looks like this:

let myArr = [ "🍎", "🍏", "🍐", "🍍" ];
let newArr = myArr.slice(0, -1);
console.log(newArr); // [ "🍎", "🍏", "🍐" ]
console.log(myArr); // [ "🍎", "🍏", "🍐", "🍍" ]
Enter fullscreen mode Exit fullscreen mode

Here, we store our sliced array in a new variable since and the original array remains unchanged. However, shallow copies have some quirks, such as sometimes leading to the original array changing - so it is not an independent copy. You can learn morea about shallow copies and how to create deep copies here.

You can also learn more about the slice method here.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
jakobjingleheimer profile image
Jacob Smith

If you want to mutate the original array, the simplest and most efficient way to remove the last item within it is to just shrink the array by reducing its length:

const arr = ['foo','bar','qux'];
arr.length = 2; // arr = ['foo','bar']
--arr.length;   // arr = ['foo']
arr.length--;   // arr = []
Enter fullscreen mode Exit fullscreen mode

It can also be used to remove more than just 1 item at a time:

const arr = ['foo','bar','qux','zed'];
arr.length -= 2; // arr = ['foo','bar']
arr.length = 0; // arr = []
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free