JavaScript Array pop Method Examples

Introduction

An array is a powerful data structure in JavaScript that allows us to store and keep a collection of multiple primitive data types (including objects themselves). With them, we can scale and build complex operations that are not possible with primitive data types (e.g., strings, numbers, Boolean, symbol).

Strings are immutable, however, arrays are mutable and can be modified. One of the ways to change an array is to delete some of its elements (in the collection).

In this article, we will discuss how to use the pop method in JavaScript arrays.

 

The JavaScript array pop method

In JavaScript, the pop method allows us to remove the last element from an array. In addition, it returns the element that has been removed or undefined if there is no element within the array. Unlike other methods such as slice that return new arrays, it changes the content of the array.

 

Example-1: Remove last element from the JS Array

Let’s illustrate the actions of the pop method by creating a songs array and using the pop method on it.

let songs = [
    "attention",
    "blinding lights",
    "tell everybody",
    "last last",
    "unstoppable",
];

let removedSong = songs.pop();

console.log(songs, removedSong);

Output

[ 'attention', 'blinding lights', 'tell everybody', 'last last' ] unstoppable

As you can see, the pop method returns the element it removed from the array, and the song array no longer contains unstoppable.

 

Example-2: Remove last n elements from JS Array

If we need to remove the last three elements within the array, we can make use of for loop to remove such. To achieve this, we can define a removeSongs function that has a default value of 1, and use the typical for loop to iterate over the songs array and remove the last element with every iteration. In addition, we can log every song that has been removed because the pop method returns the element it removes.

let songs = [
    "attention",
    "blinding lights",
    "tell everybody",
    "last last",
    "unstoppable",
];

function removeSongs(number = 1) {
    for (let index = 0; index < 3; index++) {
        let removedSong = songs.pop();
        console.log(
            `This song - ${removedSong} - has been removed from your library.`
        );
    }
}

removeSongs(3);
console.log(songs);

Output

This song - unstoppable - has been removed from your library.
This song - last last - has been removed from your library.
This song - tell everybody - has been removed from your library.
[ 'attention', 'blinding lights' ]

You can also work with non-array objects, but the object needs to contain length property as the pop method reads the property. So, the property at the length-1 is returned and removed from the object.

const nonArrayObj = {
    length: 4,
    unrelated: "foo",
    3: "three",
};

console.log(Array.prototype.pop.call(nonArrayObj));
console.log(nonArrayObj);

Output

three
{ length: 3, unrelated: 'foo' }

In the above code, the nonArrayObj object contains three properties, but the important property is the length property. The pop method will subtract 1 from the length property which gives 3, and will then go to the property named 3 and return (”three”) and remove it from the object.

 

Summary

If you want to delete an element in the last position within an array, you can use the pop method, however, if you want to remove the first element, you might need to check out the shift method.

 

References

Array - JavaScript | MDN (mozilla.org)
Array.prototype.pop() - JavaScript | MDN (mozilla.org)
Array.prototype.shift() (mozilla.org)