Difference between shift() and pop() methods in Javascript

The shift() method removes the element at the first index (index 0) and shifts all remaining elements down by one position, then returns the removed value. If the array is empty, it returns undefined.

The pop() method removes the last element from an array and returns that element. This method changes the length of the array.

Syntax

array.shift()   // Removes first element
array.pop()     // Removes last element

Example: Comparing shift() and pop()

let fruits = ['apple', 'mango', 'orange', 'kiwi'];
let fruits2 = ['apple', 'mango', 'orange', 'kiwi'];

console.log("pop() removes:", fruits.pop());
console.log("shift() removes:", fruits2.shift());

console.log("After pop():", fruits);
console.log("After shift():", fruits2);

pop() removes: kiwi
shift() removes: apple
After pop(): [ 'apple', 'mango', 'orange' ]
After shift(): [ 'mango', 'orange', 'kiwi' ]

Key Differences

Performance Comparison

shift() is slower than pop() because it needs to shift all remaining elements to the left once the first element is removed, while pop() simply removes the last element without affecting other indices.

Example: Empty Array Behavior

let emptyArray = [];

console.log("shift() on empty array:", emptyArray.shift());
console.log("pop() on empty array:", emptyArray.pop());

shift() on empty array: undefined
pop() on empty array: undefined

Conclusion

Both shift() and pop() mutate the original array and return the removed element. Use pop() for better performance when removing from the end, and shift() only when you specifically need to remove from the beginning.