JavaScript Arrays

JavaScript Array push and pop

Written by Swapnil RajaPublished 24 Aug 2026

JavaScript push, pop, shift and unshift add and remove elements at the ends of an array.

push and pop work at the end of the array.

unshift and shift work at the start.

Example

javascript

const fruits = ["Apple"];

fruits.push("Banana");

console.log(fruits.join(","));

The output is Apple,Banana.

The Four Methods

push adds one or more elements to the end and returns the new length.

pop removes the last element and returns it.

unshift adds to the start; shift removes from the start.

All four change the original array rather than returning a copy.

Syntax

javascript

array.push(value);
array.pop();
array.unshift(value);
array.shift();

Only push and unshift take arguments.

push Adds to the End

push can add several values at once.

Example

javascript

const list = [1];

list.push(2, 3);

console.log(list.join(","));

The output is 1,2,3.

pop Removes from the End

pop gives you back the value it removed.

Example

javascript

const list = [1, 2, 3];

const last = list.pop();

console.log(last);
console.log(list.join(","));

The removed value is 3, and the array now holds 1,2.

unshift and shift

These do the same job at the front of the array.

Example

javascript

const list = [2, 3];

list.unshift(1);
console.log(list.join(","));

const first = list.shift();
console.log(first);

Adding at the front is slower on very large arrays, because every index moves.

push Returns the New Length

The return value is the length, not the array.

Example

javascript

const list = ["a"];

const size = list.push("b");

console.log(size);

A common mistake is expecting the array back.

They Change the Original

These four methods modify the array in place.

If you need to keep the original, make a copy first.

Example

javascript

const original = [1, 2];
const copy = [...original];

copy.push(3);

console.log(original.length);
console.log(copy.length);

The original still has two elements.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript push and pop</title>
</head>
<body>

  <h1>JavaScript push and pop</h1>

  <p id="result"></p>

  <script>
    const queue = ["Ada"];

    queue.push("Grace");
    queue.unshift("Alan");

    document.getElementById("result").innerHTML = queue.join(", ");
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try removing someone:

Add queue.pop(); before the output line and see who disappears.

Important Points

push adds to the end and returns the new length.
pop removes the last element and returns it.
unshift adds to the start and shift removes from it.
All four change the original array.
Spread the array into a copy first if you need the original unchanged.

Conclusion

These four methods are how you grow and shrink an array from either end.

Because they change the array in place, be careful when the array is shared.

Understanding them is the basis for stacks and queues.

PreviousJavaScript Array Access NextJavaScript Array slice and splice