Definition and Usage

The pop() function removes the last element from an array and returns it.

It effectively deletes that element from the original array.

Features

  • This operation decreases the length of the array by one.
  • Returns the removed element.
  • Modifies the original array directly.

The shift() function is similar but removes the first element from an array.

Basic Example

JavaScript 
const arr = [1, 2, 3];

// Removes the last element from the array
arr.pop();
console.log(arr); // Output: [1, 2]

Syntax

JavaScript 
arr.pop()

arr is the array to which the pop() function is applied.

Parameters

none.

Return Value

The pop() function returns the last element removed from the array.
If the array is empty and there is no element to remove, it returns undefined.

JavaScript Return Value of pop() 
// Initialize the array
const arr = [1, 2, 3];

// Remove the last element from the array
const removedItem = arr.pop();
console.log(arr); // Output: [1, 2]
console.log("Returned value -", removedItem); // Output: "Returned value - 3"

// Case 1: Empty array
const emptyArray_1 = [];
const emptyArray_1_removedItem = emptyArray_1.pop(); // Array is empty, no element to remove

console.log("Returned value -", emptyArray_1_removedItem); // Output: "Returned value -" undefined

// Case 2: Array with one element
const emptyArray_2 = [1];
const emptyArray_2_removedItem = emptyArray_2.pop();

console.log("Returned value -", emptyArray_2_removedItem); // Output: "Returned value - 1"

Important Notes and Use Cases

There are several key concepts and precautions to keep in mind when using the pop() function.

  • Return Value
  • Modification of the Original Array and Array Length
  • Reversing an Array Using a Loop
  • Removing the Last Element with the delete Operator

Return Value

The pop() function returns the removed element. You can store the returned value in a variable.

JavaScript 
const fruits = ["apple", "banana", "cherry"];
const removedFruit = fruits.pop();

console.log(removedFruit); // Outputs: "cherry"

Modification of the Original Array and Array Length

The pop() function modifies the original array. Therefore, when you remove an element, the array changes and its length decreases.

JavaScript 
const fruits = ["apple", "banana", "cherry"];
fruits.pop();

console.log(fruits.length); // Outputs: 2

Code Explanation
The length property returns the number of elements in an array.

Reversing an Array Using a Loop

You can reverse an array by combining pop() with a loop.

JavaScript 
// Original array
const fruits = ["apple", "banana", "cherry"];

// Create an empty array for reversed elements
const reversedFruits = [];

// Use a loop to pop elements from the original array and push them into the new array
while (fruits.length > 0) {
    reversedFruits.push(fruits.pop());
}

// Output the reversed array
console.log(reversedFruits); // Outputs: ["cherry", "banana", "apple"]

Code Explanation
The while loop repeatedly executes its code block as long as the condition evaluates to true.

JavaScript also provides the built-in reverse() function, which is a simpler and more intuitive way to reverse an array.

JavaScript 
const fruits = ["apple", "banana", "cherry"];

// Reverse the array
const reversedFruits = fruits.reverse();

// Output the reversed array
console.log(reversedFruits); // Outputs: ["cherry", "banana", "apple"]

Code Explanation
The reverse() function reverses the order of the elements in an array.

Removing the Last Element with the delete Operator

Instead of using pop(), you can remove the last element of an array using the delete operator. However, this leaves an empty slot in the array, and the array's length does not change.

JavaScript 
const fruits = ["apple", "banana", "cherry"];

// Remove the last element using delete
delete fruits[fruits.length - 1];

// Output the array
console.log(fruits); // Outputs: ["apple", "banana", <empty>]
console.log(fruits[2]); // Outputs: undefined

Using the delete operator to remove the last element of an array is not recommended.

Specifications

Specification for JavaScript pop() Function
Specification
pop() ECMAScript Language Specification
#sec-array.prototype.pop

Browser compatibility

Browser compatibility for JavaScript pop() Function
Method
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
pop() 1 12 1 1

References

See also