JavaScript Array push() Method

push() adds one or more elements to the end of a JavaScript array. It changes the original array and returns the array's new length.

const scripts = ["PHP", "ASP"];
const newLength = scripts.push("JavaScript", "HTML");

console.log(scripts);   // ["PHP", "ASP", "JavaScript", "HTML"]
console.log(newLength); // 4

push() Syntax and Return Value Top ↑

array.push(element1);
array.push(element1, element2, element3);

The method returns a number: the new length after insertion. It does not return the array itself.

Add One Element to the End Top ↑

const languages = ["PHP", "JavaScript"];
languages.push("Python");
console.log(languages); // ["PHP", "JavaScript", "Python"]

Add Multiple Elements in One push() Call Top ↑

const scripts = ["PHP", "ASP"];
scripts.push("JavaScript", "HTML", "Python");
console.log(scripts);

All supplied values are appended in the same order they appear in the argument list.

Use the Length Returned by push() Top ↑

const queue = ["A", "B"];
const length = queue.push("C");
console.log(length); // 3

If you need the appended item later, access it separately; the return value is the new length.

push() Changes the Original Array Top ↑

const original = [1, 2];
const alias = original;
original.push(3);

console.log(alias); // [1, 2, 3]

Both variables refer to the same array, so both observe the mutation.

Push an Array as One Element or Push Its Elements Top ↑

Passing an array directly adds that array as a single nested element.

const values = [1, 2];
const extra = [3, 4];

values.push(extra);
console.log(values); // [1, 2, [3, 4]]

To append the values individually, use spread syntax for reasonably sized arrays:

const values = [1, 2];
const extra = [3, 4];

values.push(...extra);
console.log(values); // [1, 2, 3, 4]

Use push() and pop() as a Stack Top ↑

push() adds at the end and pop() removes from the end, giving a last-in, first-out (LIFO) pattern.

const stack = [];
stack.push("first");
stack.push("second");

console.log(stack.pop()); // second
console.log(stack);       // ["first"]

Push Objects and Nested Values Top ↑

An array can hold objects and other arrays. push() does not clone the object you add; it stores the reference.

const users = [];
const user = { name: "Ravi" };
users.push(user);

user.name = "Anita";
console.log(users[0].name); // Anita

Array Indexes After push() Top ↑

The original page demonstrated that existing indexes remain stable while new elements receive the next available indexes.

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
scripts.push("VBScript", "Perl");

for (let i = 0; i < scripts.length; i++) {
  console.log(i, scripts[i]);
}

0 PHP
1 ASP
2 JavaScript
3 HTML
4 VBScript
5 Perl

push() vs concat() and Spread Syntax Top ↑

Use push() when you intentionally want to mutate the existing array. Use concat() or array spread when you want a new array.

const a = [1, 2];
const b = a.concat(3, 4); // a is unchanged
const c = [...a, 3, 4];  // a is unchanged

console.log(a); // [1, 2]

Common push() Mistakes Top ↑

• Assigning array = array.push(value); that replaces the array variable with a number.
• Expecting push(otherArray) to flatten the other array.
• Forgetting that push() mutates every reference to the same array.
• Using for...in just to inspect numeric indexes when a normal index loop or entries() is clearer.

Interactive push() Demo Top ↑

The original page includes a practical demo where users add values from a text field and see the array update.

Open push() Demo → Join Array Elements → Display Array Elements → Add at the Beginning with unshift() → Add or Remove at Any Position →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: