There is no shortage of ways to remove the last element from an array in JavaScript. Below are the most popular solutions for this task.
Remove The Last Element From An Array In JavaScript
With Array.pop()
The pop() method of an Array object does two things: removing the last element and returning it. When provided with a zero array, it returns undefined.
Keep in mind that this is a mutating method, meaning it processes the original array and changes its length. It works similarly to shift(), but instead of affecting the first element, it applies to the last one.
The following example shows you can use this method in your program:
const sites = [‘Tutopal’, ‘Reddit’, ‘Stack Overflow’, ‘Quora’];
console.log(sites);
sites.pop();
console.log(sites);
console.log(sites.pop());
console.log(sites);Output:
[ ‘Tutopal’, ‘Reddit’, ‘Stack Overflow’, ‘Quora’ ]
[ ‘Tutopal’, ‘Reddit’, ‘Stack Overflow’ ]
Stack Overflow
[ ‘Tutopal’, ‘Reddit’ ]The original array in the above example has four elements. When you invoke the pop() method, the last element (‘Quora’) is removed. This modification to the array reflects in the new output of the console.log() method.
If you invoke it from a function, the last element is removed and returned to the caller at the same time.
It is important to note that you can apply or call this method over JavaScript objects that resemble arrays as well because of its intentionally generic nature. Be aware that if those objects don’t have a length property to indicate the last element in zero-based indexing, the call might not produce any meaningful result.
Note: if you want to print JavaScript arrays with each element in one line, follow this guide.
With Array.splice()
While the pop() method has a narrow purpose, splice() has more generic uses. It can add new elements or replace or remove existing elements of an array. But at the end of the day, it can also be used to remove the last element.
For this intention, you will need to provide the method with two parameters:
splice(start, deleteCount)
- start: the index where splice() should begin to modify the array.
- deleteCount: this optional parameter specifies the number of elements from start that splice() should remove.
The returned value is the deleted elements (stored in an array).
This is how you can modify an array and remove its last element with splice():
const sites = [‘Tutopal’, ‘Reddit’, ‘Stack Overflow’, ‘Quora’];
console.log(sites);
const removed = sites.splice(-1, 1);
console.log(removed);
console.log(sites);Output:
[ ‘Tutopal’, ‘Reddit’, ‘Stack Overflow’, ‘Quora’ ]
[ ‘Quora’ ]
[ ‘Tutopal’, ‘Reddit’, ‘Stack Overflow’ ]To affect the last element, we need to use the index -1. In general, splice() will count from the end of the array if the start parameter is negative. The last element has the index -1, and so on. Since the deleteCount parameter here is 1, it means splice() removes (and returns) just that element at the end of the array.
Like pop(), the splice() method also makes changes directly on the array from which it is invoked.
With Array.slice()
If you don’t want to affect the original array, use the slice() method. It allows you to create a shallow copy of a specific portion of your array. This means a new array will be created to store copies of the elements you want.
Syntax:
slice(start, end)
In which start and end are the indexes of where you want to begin and end the extraction.
Example:
const sites = [‘Tutopal’, ‘Reddit’, ‘Stack Overflow’, ‘Quora’];
console.log(sites);
const newsites = sites.slice(1, -1);
console.log(newsites);
console.log(sites);Output:
[ ‘Tutopal’, ‘Reddit’, ‘Stack Overflow’, ‘Quora’ ]
[ ‘Reddit’, ‘Stack Overflow’ ]
[ ‘Tutopal’, ‘Reddit’, ‘Stack Overflow’, ‘Quora’ ]Like splice(), you will need to use the negative index -1 to indicate the last element of an array. But JavaScript will stop the extraction before that index, meaning the newly created array will store all the elements but the last one. Note that the original array isn’t affected.
Summary
There are multiple built-in methods that can help you remove the last element from an array in JavaScript. They have different original purposes, and you should pick the solution that matches your overall needs the most.
Reference Sources:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice