JS Array Push and Pop Methods: A Complete Guide

push() and pop() are the two array methods that add and remove elements from the end of an array. Together they let you treat an array like a stack -- you add to the top and remove from the top.

push() adds to the end and returns the new length. pop() removes from the end and returns the element it removed.

push() -- Add to the End

push() takes one or more arguments and adds them to the end of the array. It mutates the original array and returns the new length.

javascript

const fruits = ["apple", "banana"];
 
const newLength = fruits.push("orange");
 
console.log(fruits);    // ["apple", "banana", "orange"]
console.log(newLength); // 3

The return value is the new length, not the added element. This is a common point of confusion.

You can push multiple elements at once:

javascript

const numbers = [1, 2];
 
numbers.push(3, 4, 5);
 
console.log(numbers); // [1, 2, 3, 4, 5]

The arguments are added in the order you pass them: 3 first, then 4, then 5.

Practical push() Use Cases

Building an array from a loop:

javascript

const evens = [];
 
for (let i = 0; i <= 10; i++) {
  if (i % 2 === 0) {
    evens.push(i);
  }
}
 
console.log(evens); // [0, 2, 4, 6, 8, 10]

Collecting user input works the same way. Each call to push() adds one task and hands back the new count, which you can show to the user without a separate length lookup:

javascript

const todoList = [];
 
function addTask(task) {
  const length = todoList.push(task);
  console.log(`Task added. ${length} total tasks.`);
}
 
addTask("Buy groceries"); // Task added. 1 total tasks.
addTask("Walk the dog");   // Task added. 2 total tasks.

pop() -- Remove from the End

pop() removes the last element from an array and returns it. It mutates the original array.

javascript

const colors = ["red", "green", "blue"];
 
const removed = colors.pop();
 
console.log(colors);  // ["red", "green"]
console.log(removed); // "blue"

The array shrinks by one. The removed value is returned so you can use it.

If you call pop() on an empty array, it returns undefined:

javascript

const empty = [];
 
console.log(empty.pop()); // undefined
console.log(empty);       // [] (still empty, no error)

pop() never throws an error, even on an empty array.

Practical pop() Use Cases

Processing items in reverse order is a common use for pop(). Looping while the array still has items and popping one each time visits them from the last pushed to the first:

javascript

const stack = ["step1", "step2", "step3"];
 
while (stack.length > 0) {
  const step = stack.pop();
  console.log(`Processing: ${step}`);
}
// Processing: step3
// Processing: step2
// Processing: step1

This is a LIFO (last in, first out) pattern. The last item pushed is the first one popped. It is useful for undo operations, back-button navigation, and expression evaluation.

Getting and removing the most recent item:

javascript

const recentSearches = ["pizza", "sushi", "tacos"];
 
const lastSearch = recentSearches.pop();
console.log(lastSearch); // "tacos"

push() + pop() Together: The Stack Pattern

A stack is a data structure where you only interact with the end. You push to add and pop to remove. A browser history is a good example: each page visit pushes a new URL onto the end of the array.

javascript

const history = [];
 
history.push("/home");
history.push("/products");
history.push("/products/42");
 
console.log(history); // ["/home", "/products", "/products/42"]

Clicking the back button pops the most recent URL off the end and returns to the page the user was on before that, which is exactly how pop() behaves on any array used as a stack:

javascript

const history = ["/home", "/products", "/products/42"];
 
const previous = history.pop();
console.log(previous); // "/products/42"
console.log(history);  // ["/home", "/products"]

This is the foundation of browser back-button behavior and undo systems.

Comparison: push/pop vs shift/unshift

push() and pop() are fast because they only touch the end of the array. shift() and unshift() are slower on large arrays because every existing element must be re-indexed.

Common Mistakes

Expecting push() to return the element:

javascript

const arr = [1, 2];
 
const element = arr.push(3);
console.log(element); // 3 (the new length, not the value 3)

It is easy to misread that 3 as the pushed value, but it is really the array's new length, which only looks like the pushed value here by coincidence. Always remember that push() returns the new length, and the array itself is already updated by the time it returns.

Using pop() when you only need to read the last element:

javascript

const arr = ["a", "b", "c"];
 
// Wrong: removes the element when you just wanted to see it
const last = arr.pop();
console.log(arr); // ["a", "b"] -- permanently changed!
 
// Right: read without removing
const lastRead = arr[arr.length - 1]; // "b"

Use bracket notation or at(-1) when you only need to read, not remove. For more on reading elements safely, see Accessing and Modifying JS Array Elements Guide.

Now that you can add and remove from the end, learn how to do the same from the start with shift and unshift.