JS Array Push and Pop Methods: A Complete Guide

const cart = ["Laptop", "Mouse"];
 
const newLength = cart.push("Keyboard");
console.log(cart);      // ["Laptop", "Mouse", "Keyboard"]
console.log(newLength); // 3

array.push(element1)
array.push(element1, element2, ..., elementN)

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

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

// Bug: push() returns the new length, not the array
const result = [1, 2, 3].push(4);
console.log(result); // 4 (the length, not the array!)
 
// What the developer expected:
// [1, 2, 3, 4]
 
// Fix: if you need the array back, use spread
const arr = [1, 2, 3];
const withFour = [...arr, 4]; // [1, 2, 3, 4]

const stack = ["A", "B", "C", "D"];
 
const removed = stack.pop();
console.log(removed); // "D"
console.log(stack);   // ["A", "B", "C"]

const removedElement = array.pop()

const empty = [];
const result = empty.pop();
console.log(result);       // undefined
console.log(empty.length); // 0

class BrowserHistory {
  constructor() {
    this.pages = [];
  }
 
  visit(url) {
    this.pages.push(url);
    console.log(`Navigated to: ${url}`);
  }
 
  back() {
    if (this.pages.length === 0) {
      console.log("No history to go back to");
      return null;
    }
    const previous = this.pages.pop();
    console.log(`Going back from: ${previous}`);
    return previous;
  }
 
  current() {
    return this.pages.at(-1) || "No page loaded";
  }
}
 
const history = new BrowserHistory();
history.visit("https://example.com");
history.visit("https://example.com/about");
history.visit("https://example.com/contact");
 
console.log(history.current()); // "https://example.com/contact"
history.back();                  // "Going back from: https://example.com/contact"
console.log(history.current()); // "https://example.com/about"

class UndoManager {
  constructor() {
    this.history = [];
    this.redoStack = [];
  }
 
  execute(action) {
    action.do();
    this.history.push(action);
    this.redoStack.length = 0; // Clear redo after new action
  }
 
  undo() {
    const action = this.history.pop();
    if (!action) return;
    action.undo();
    this.redoStack.push(action);
  }
 
  redo() {
    const action = this.redoStack.pop();
    if (!action) return;
    action.do();
    this.history.push(action);
  }
}
 
// Usage with a text editor
const manager = new UndoManager();
let text = "";
 
manager.execute({
  do() { text += "Hello"; },
  undo() { text = text.slice(0, -5); },
});
console.log(text); // "Hello"
 
manager.execute({
  do() { text += " World"; },
  undo() { text = text.slice(0, -6); },
});
console.log(text); // "Hello World"
 
manager.undo();
console.log(text); // "Hello"
 
manager.redo();
console.log(text); // "Hello World"

const formEntries = [];
 
function addEntry(fieldName, value) {
  if (!fieldName || value === undefined) {
    throw new Error("Field name and value are required");
  }
 
  formEntries.push({
    field: fieldName,
    value: value,
    timestamp: Date.now(),
  });
}
 
function removeLastEntry() {
  const removed = formEntries.pop();
  if (removed) {
    console.log(`Removed entry: ${removed.field} = ${removed.value}`);
  }
  return removed;
}
 
addEntry("name", "Alice Johnson");
addEntry("email", "alice@example.com");
addEntry("role", "Developer");
console.log(formEntries.length); // 3
 
removeLastEntry(); // "Removed entry: role = Developer"
console.log(formEntries.length); // 2

async function processInBatches(items, batchSize, processFn) {
  const queue = [...items]; // Clone to avoid mutating input
  const results = [];
 
  while (queue.length > 0) {
    const batch = [];
    for (let i = 0; i < batchSize && queue.length > 0; i++) {
      batch.push(queue.pop());
    }
 
    const batchResults = await Promise.all(batch.map(processFn));
    results.push(...batchResults);
    console.log(`Processed batch. Remaining: ${queue.length}`);
  }
 
  return results;
}
 
// Example usage
const urls = Array.from({ length: 20 }, (_, i) => `https://api.example.com/item/${i}`);
// processInBatches(urls, 5, fetchData);

// Benchmark: push 1 million elements
const arr = [];
console.time("push-million");
for (let i = 0; i < 1_000_000; i++) {
  arr.push(i);
}
console.timeEnd("push-million"); // ~15-25ms in V8
 
// Benchmark: pop all 1 million elements
console.time("pop-million");
while (arr.length > 0) {
  arr.pop();
}
console.timeEnd("pop-million"); // ~8-15ms in V8

// Bug: push returns the new length
const result = [].push(1).push(2); // TypeError: (3).push is not a function
 
// Fix: chain properly
const arr = [];
arr.push(1);
arr.push(2);
// Or use a builder pattern: [...[], 1, 2]

// Bug: React won't re-render because the reference hasn't changed
function addTodo(todo) {
  todos.push(todo); // Mutates existing array
  setTodos(todos);  // Same reference — React skips re-render
}
 
// Fix: create a new array
function addTodo(todo) {
  setTodos([...todos, todo]); // New array — React detects change
}

const stack = [10, 20, 30];
 
// Developer forgot to capture the return value
stack.pop();
// The value 30 is gone forever
 
// Correct: capture it if you need it
const last = stack.pop();
console.log(last); // 20