JavaScript Array pop()

In this post, we will discuss pop() method available in JavaScript Array.

pop()

The pop() method will remove the last element present in the given array. It will not take any parameters.

Syntax:

array_name.pop()

Here, the 'array_name' is the name if the array.

Example 1:-

Let's create an array that hold 10 strings and remove the last element.

CopiedCopy Code
<html>
<body>
<script>
// Consider the array with 10 strings
const subjects =["php","html","node.js","java","jsp","html","sql","hadoop","iot","python"];
document.writeln("Actual data: <br>");
document.writeln(subjects);
// Use pop() method to remove last item from the subjects array,
subjects.pop();
document.writeln("<br>");
document.writeln("<br>");
document.writeln("After removing last item: <br>");
document.writeln(subjects);
</script>
</body>
</html>

Output:

Actual data:
php,html,node.js,java,jsp,html,sql,hadoop,iot,python
After removing last item:
php,html,node.js,java,jsp,html,sql,hadoop,iot

So, in the subject array, "python" is the last element. so after applying pop(), it is removed from the array.

Example 2:-

Let's create an array that hold 10 integers and remove the last element.

CopiedCopy Code
<html>
<body>
<script>
// Consider the array with 10 integers
var marks =[100,67,89,09,78,90,90,78,65,34];
document.writeln("Actual data: <br>");
document.writeln(marks);
// Use pop() method to remove last item from the marks array,
marks.pop();
document.writeln("<br>");
document.writeln("<br>");
document.writeln("After removing last item: <br>");
document.writeln(marks);
</script>
</body>
</html>

Output:

Actual data:
100,67,89,9,78,90,90,78,65,34
After removing last item:
100,67,89,9,78,90,90,78,65

So, in the subject array, 34 is the last element. so after applying pop(), it is removed from the array.

Example 3:-

Let's create an array that hold 10 integers and remove the last two elements by applying pop() twice.

CopiedCopy Code
<html>
<body>
<script>
// Consider the array with 10 items
var marks =[100,67,89,09,78,90,90,78,65,34];
document.writeln("Actual data: <br>");
document.writeln(marks);
// Use pop() method to remove last item from the marks array,
marks.pop();
document.writeln("<br>");
document.writeln("<br>");
document.writeln("After removing last item: <br>");
document.writeln(marks);
// Use pop() method to remove last item from the marks array,
marks.pop();
document.writeln("<br>");
document.writeln("<br>");
document.writeln("After removing last item: <br>");
document.writeln(marks);
</script>
</body>
</html>

Output:

Actual data:
100,67,89,9,78,90,90,78,65,34
After removing last item:
100,67,89,9,78,90,90,78,65
After removing last item:
100,67,89,9,78,90,90,78

So, in the subject array, 34 is the last element. so, after applying pop(), it is removed from the array and now the updated array is [100,67,89,9,78,90,90,78,65]. Now 65 is removed after applying the pop() function.

Example 4:-

Let's create an array that hold 10 integers and remove the last three elements by applying pop() thrice and return the length of an array at each time.

CopiedCopy Code
<html>
<body>
<script>
// Consider the array with 10 items
var marks =[100,67,89,09,78,90,90,78,65,34];
document.writeln("Actual data: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("Total elements: <br>");
document.writeln(marks.length);
// Use pop() method to remove last item from the marks array,
marks.pop();
document.writeln("<br>");
document.writeln("<br>");
document.writeln("After removing last item: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("Total elements: <br>");
document.writeln(marks.length);
// Use pop() method to remove last item from the marks array,
marks.pop();
document.writeln("<br>");
document.writeln("<br>");
document.writeln("After removing last item: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("Total elements: <br>");
document.writeln(marks.length);
// Use pop() method to remove last item from the marks array,
marks.pop();
document.writeln("<br>");
document.writeln("<br>");
document.writeln("After removing last item: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("Total elements: <br>");
document.writeln(marks.length);
</script>
</body>
</html>

Output:

Actual data:
100,67,89,9,78,90,90,78,65,34
Total elements:
10
After removing last item:
100,67,89,9,78,90,90,78,65
Total elements:
9
After removing last item:
100,67,89,9,78,90,90,78
Total elements:
8
After removing last item:
100,67,89,9,78,90,90
Total elements:
7

So, in the subject array, 34 is the last element. so after applying pop(), it is removed from the array and Now the updated array is [100,67,89,9,78,90,90,78,65]. Now 65 is removed after applying the pop() function. Now the updated array is - [100,67,89,9,78,90,90,78]. Finally, after applying pop() again, the final array is [100,67,89,9,78,90,90]. In all cases, total number of elements in the array is returned.