Introduction to pop() in JavaScript
pop() is a method in Javascript whose function is to remove the final element from an array and to return that element. Hence after using this method the length of the array will be changed. Basically an array can contain a boolean, a number, string or any other object type which is allowed in an array. the pop() function is generic meaning that it can be called and applied to any object which resembles an array. Certain objects which do not have a length property shown in the last series of consecutive, the numerical properties may or may not behave in a known manner.
Syntax:
array.pop();- Return values: Returns the element which is removed from the array. In case the array is empty then it returns “undefined”.
- Arguments: This method does not require any arguments/parameters.
Examples for pop() in JavaScript
Let us check out some examples to understand the pop() function in detail.
Example #1
Code:
<script>
var num = [32, 4, 87, 11];
var popped = num.pop();
document.write("Element which is removed from the array is : " + popped);
document.write("<br>");
document.write(" Remaining numbers in array :" +num);
</script>Output:
This is one of the basic examples of not in any specific format of Javascript just to show the functionality of the pop() function. So here we are first declaring our array and its elements by assigning it to a variable named “num”. By using the pop function we are popping an element from the num array and the output will be written to another variable called “popped”. This variable we are using to print in the output to show which element has been removed from the array. It will be the last element which in this case is number 11. The next element which will be popped on the next run is number 87 and the iteration goes on.
Example #2
Code:
<script>
var empty= [];
var popped = empty.pop();
document.write("Element which is removed from the array is : " +popped);
</script>Output:
In the above example, we are checking what happens if the input array given is in case empty. Hence first we are declaring an array with the name “empty” and not giving any elements as part of the array. Next, we are using the same pop() function and assigning its output to a variable “popped”. This variable is then displayed in the output. When we run this code we can see that the output we get is something as “undefined”. This is the case when arrays are empty.
Example #3
Code:
<script>
// Illustration of pop() function in Javascript
function test() {
var animals = ["Dog", "Cat", "Cow", "Bear"];
// here we are popping last element from the array
var popped = animals.pop();
document.write("Element which is removed from the array is : " + popped);
document.write("<br>");
document.write("Remaining elements are: " + animals );
}
test();
</script>Output:
In the above example, we shall see the usage of the same pop() method when declared inside a proper function of Javascript. First, we are declaring a function called “test” inside which our operations are going to be performed. We are first declaring our required input array and then using the same pop() function to remove a last element from the array. The removed element and the remaining array elements are printed as is. Also, we are showing the usage of string in the arrays by using animal names as the input array here.
Example #4
Code:
<html>
<head>
<title>JavaScript pop method for Arrays</title>
</head>
<body>
<!--Declaration of type of script to be used -->
<script type = "text/javascript">
<!--We shall declare a few random names for this example -->
var num = [12, 44, 25, 67];
var element = num.pop();
document.write("Element which is removed from the array is : " + element );
var element = num.pop();
document.write("<br />Element which is removed from the array is : " + element );
</script>
</body>
</html>Output:
As seen in the above example we are first using the html title tag to give the name of our program title as “JavaScript pop method for Arrays”. In html we start any tag by <> symbol and end it using </> as shown for all the tags above. Next, we have to declare the body of our function. In the body, we are first specifying that we are going to use text/javascript here. Then we are declaring an array of random numbers and then assigning it to a variable called “num”. We are then performing the pop() operation on this variable “num” and its result is being assigned to another variable called “element”.
We are displaying the output which is stored in this “element” variable which is the number “popped” from the array i.e the last element of the array which is removed. Each time we run the code one more element from the end of the array will be removed until no elements are present in it i.e the array is empty.
Example #5
Code:
<script>
var companies = new Array();
companies.push("Infosys");
companies.push("TCS");
companies.push("Toyota");
companies.push("Intel");
document.write("Total companies present in the array are: " + companies);
document.write("<br />");
companies.pop();
document.write("The companies present after popping are: " + companies);
document.write("<br />");
companies.pop();
companies.pop();
document.write("The companies present after popping are: " +companies);
document.write("<br />");
</script>Output:
Let us consider the above example where we are also using another in-built function of Javascript called the push() method whose function is the exact opposite of pop(). push() is used to insert an element into the array and it starts inserting elements at the end of the array. So here we are first declaring a new array whose name is “companies”. Then more elements are added to it using the push() method and displayed in the output. Now we will start popping the elements one by one and they are displayed in output as well.
Conclusion
pop() is a widely used method in Javascript which follows the principle of “Last come First Out” which means the element which was inserted at the end of the array is the one which will be removed first by it. We have seen the same in all of the above examples as well. Basically, these functions are used in stacks and arrays which contain a range of elements.
Recommended Articles
This is a guide to pop() in JavaScript. Here we discuss the introduction and syntax of pop() in JavaScript along with different examples and its code implementation. You may also look at the following articles to learn more –
