Array pop() Method in JavaScript | Explained

July 9, 2022 | by Arround The Web | No comments

Array pop() Method in JavaScript | Explained

Arrays are one of the most used elements in any programming language. Arrays are used for multiple purposes to implement the “Queue” data structure and the “Stack” data structure. In JavaScript ES6, multiple methods are available that help us work with arrays, and one of them is the pop() method. In this post, we will focus on this pop() method and explore every minute detail to grasp the working of this method correctly.

Purpose of the pop() method

Let’s start with the purpose of the array.pop() method. This method is used to remove the very last element or item from an array. But coming with a twist, this method doesn’t only remove the last element; it even returns the popped element to its caller.

Syntax of the array.pop() method
Let’s start with the basics; by basics, we mean the syntax. The syntax is as follows:

arr.pop()

The syntax mentioned above is only used to remove the last element from the array, but in case you want to fetch that value as well, then you would use the following syntax:

var item = arr.pop()

In the syntax, we can see:

arr: Is the name of the array on which we are using the pop() method
item: is the name of the variable in which we are storing the return value from this pop() method.

Return Value
The return value of the pop() method can be a number, string, or any object depending upon the type of element removed from the array.

Examples
To better understand the working of this method, we are going to go over some examples of this method.

Example 1: Removing Element using pop() method

First off, we need a new array which we can create using the following line of code:

arrayOfPlaces = ["Paris", "Rome", "Prague", "Munich", "Amsterdam"]

To remove the last city from this list we are going to call the pop() method using the following line of code:

arrayOfPlaces.pop()

And finally, to see the result onto the terminal, we are going to call the console log function:

console.log(`The cities present in the array are as: `, arrayOfPlaces);

After executing this program, you’ll get the following result on your terminal:

As you can see in the output, the city “Amsterdam” has been removed from this array.

Example 2: How to perform the fetch and delete using the pop() method?

Instead of directly calling the pop() method to remove the element, let’s store the popped element in a separate variable and print that variable out onto the terminal.

So, our initial array is:

arrayOfPlaces = ["Paris", "Rome", "Prague", "Munich", "Amsterdam"]

Create a variable and call the pop() method:

visitiedCity = arrayOfPlaces.pop()

To print the array and the “visitedCity” variable, use the following lines of code:

console.log(`The cities present in the array are as: `, arrayOfPlaces);
console.log("The city visited is as: ", visitiedCity);

You’ll get the following output onto the terminal:

As you can observe, we didn’t only remove the last element “Amsterdam” from the array, and we were also able to print it after placing it in another variable.

Wrap up

The pop() was released with the ECMA6 version of JavaScript. This method belongs to the family of methods that help us work with arrays while implementing different data structures in JavaScript. This method is mainly used to eradicate the last element from the array but can also perform fetch and delete operations on the last item. To perform a fetch and delete operation, you will require a different variable to store the return value of the pop() method.

Source: linuxhint.com