JavaScript Array Methods

push(), pop(), shift(), unshift()

Master the fundamental array manipulation methods for adding and removing elements from arrays.

Method Overview

Adding Elements

push(): Add to end
unshift(): Add to beginning

Removing Elements

pop(): Remove from end
shift(): Remove from beginning

push() - Add Elements to End

The push() method adds one or more elements to the end of an array and returns the new length of the array. It mutates the original array.

push() - Add Elements to End

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

// Add multiple elements
fruits.push('mango', 'pineapple');
console.log(fruits); // ['apple', 'banana', 'orange', 'mango', 'pineapple']

// Returns the new length
const length = fruits.push('grape');
console.log(length); // 6

The push() method adds one or more elements to the end of an array and returns the new length of the array. It mutates the original array.

Run Code

pop() - Remove Last Element

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

pop() - Remove Last Element

const fruits = ['apple', 'banana', 'orange'];
const removed = fruits.pop();
console.log(removed); // 'orange'
console.log(fruits); // ['apple', 'banana']

// Pop on empty array
const empty = [];
console.log(empty.pop()); // undefined

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

Run Code

shift() - Remove First Element

The shift() method removes the first element from an array and returns that element. It mutates the original array and re-indexes all elements.

shift() - Remove First Element

const fruits = ['apple', 'banana', 'orange'];
const removed = fruits.shift();
console.log(removed); // 'apple'
console.log(fruits); // ['banana', 'orange']

// Shift on empty array
const empty = [];
console.log(empty.shift()); // undefined

The shift() method removes the first element from an array and returns that element. It mutates the original array and re-indexes all elements.

Run Code

unshift() - Add Elements to Beginning

The unshift() method adds one or more elements to the beginning of an array and returns the new length. It mutates the original array.

unshift() - Add Elements to Beginning

const fruits = ['banana', 'orange'];
fruits.unshift('apple');
console.log(fruits); // ['apple', 'banana', 'orange']

// Add multiple elements
fruits.unshift('mango', 'pineapple');
console.log(fruits); // ['mango', 'pineapple', 'apple', 'banana', 'orange']

// Returns the new length
const length = fruits.unshift('grape');
console.log(length); // 6

The unshift() method adds one or more elements to the beginning of an array and returns the new length. It mutates the original array.

Run Code

Method Comparison

Method	Position	Returns	Performance
push()	End	New length	O(1)
pop()	End	Removed element	O(1)
unshift()	Beginning	New length	O(n)
shift()	Beginning	Removed element	O(n)

Real-World Use Cases

Building a Queue

Use push() to add items and shift() to remove them (FIFO)

Building a Stack

Use push() to add items and pop() to remove them (LIFO)

Recent Items List

Use push() to add new items, pop() to show recent ones

Real-time Notifications

Use unshift() to add new notifications at the top

Common Mistakes to Avoid

❌ Forgetting These Methods Mutate the Original Array

Forgetting These Methods Mutate the Original Array

const original = [1, 2, 3];
original.push(4);
console.log(original); // [1, 2, 3, 4] - original modified!

// If you need to preserve original:
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]

Common mistake to avoid

Run Code

❌ Assuming Return Value Is the Array

Assuming Return Value Is the Array

const arr = [1, 2, 3];
const result = arr.push(4); // Result is 4 (the length), not the array!

// Correct:
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

Common mistake to avoid

Run Code

FAQs

Do push and pop modify the original array?

Yes, both push() and pop() are mutating methods that modify the original array.

What do push() and unshift() return?

Both return the new length of the array after the operation.

How do I add elements to both ends?

Use push() for the end and unshift() for the beginning, or use concat(): const newArr = [1, ...existing, 2];

What's the performance difference?

push() and pop() are O(1) operations. shift() and unshift() are O(n) because they require re-indexing all elements.

Best Practices

✓Use push() and pop() for stack-like structures (Last-In-First-Out)
✓Use push() and shift() for queue-like structures (First-In-First-Out)
✓Avoid unshift() and shift() on large arrays (O(n) performance)
✓Remember these methods mutate the original array - create a copy if you need to preserve it
✓Check array length before calling pop() or shift() to avoid undefined returns

← Back to Arrays Overview