JavaScript Array push() Method

What You’ll Learn

The push() method adds one or more elements to the end of an array and returns the new length. This tutorial covers syntax, five examples, spread merging, stack patterns with pop(), and why you cannot chain .push() on its return value.

Introduction

Need to grow a list at runtime—collect user choices, queue tasks, or build a shopping cart? push() appends values to the back of an array in one call. It is one of the most common array operations in JavaScript.

Like pop(), push() mutates the original array. If you need a new array without changing the source, use spread or concat() instead.

Understanding the push() Method

array.push(element1, element2, ...) inserts each argument at index length, then length + n, and so on. The return value is the updated length—a number, not the array.

You can pass as many arguments as you need in a single call. To merge another array’s items, spread them: arr.push(...otherArray).

📝 Syntax

General form of Array.prototype.push:

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

Parameters

• element1, element2, ... — one or more values to append at the end.

Return value

• The new length of the array (number).

Side effects

• Mutates the array: elements added at the end, length increases.

Common patterns

• arr.push(item) — add one element.
• arr.push(a, b, c) — add several at once.
• arr.push(...other) — merge another array in place.
• const n = arr.push(x) — capture new length.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const numbers = [1, 2, 3];

numbers.push(4, 5);

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

[1, 2, 3, 4, 5]

const fruits = ["apple", "orange"];

const newLength = fruits.push("banana", "grape");

console.log(newLength);
// 4

console.log(fruits);
// ["apple", "orange", "banana", "grape"]

// This would throw — push returns a number:
// fruits.push("kiwi").push("mango");

4
["apple", "orange", "banana", "grape"]

const fruits = ["apple", "orange"];
const vegetables = ["carrot", "broccoli"];

fruits.push(...vegetables);

console.log(fruits);
// ["apple", "orange", "carrot", "broccoli"]

["apple", "orange", "carrot", "broccoli"]

const stack = [];

stack.push("task-1");
stack.push("task-2");
stack.push("task-3");

console.log(stack.pop());
// "task-3"

console.log(stack);
// ["task-1", "task-2"]

task-3
["task-1", "task-2"]

const base = [1, 2];

const merged = base.concat(3, 4);

console.log("concat result:", merged);
// [1, 2, 3, 4]

console.log("base unchanged:", base);
// [1, 2]

base.push(3, 4);

console.log("after push:", base);
// [1, 2, 3, 4]

concat result: [1, 2, 3, 4]
base unchanged: [1, 2]
after push: [1, 2, 3, 4]

🚀 Common Use Cases

• Dynamic lists — collect user input or API results.
• Stack operations — pair with pop() for LIFO.
• Batch append — multiple arguments in one call.
• Merge in place — target.push(...source).
• Build queues from the end — when order allows.
• Track size — use return value as new length.

📝 Notes

• Mutates the array—length increases.
• Returns new length, not the array (no chaining).
• Accepts any number of arguments in one call.
• Use spread to flatten array arguments: push(...arr).
• O(1) amortized for end insertion; faster than unshift at scale.
• For immutable updates, prefer [...arr, x] or concat.
• ES3—supported everywhere JavaScript runs.

💡 Best Practices