JavaScript array.push(): Add Elements to the End of an Array
Building a list of results, collecting form inputs, growing a dataset row by row — all of these require adding elements to an array dynamically. push() is the method you'll use most often to grow an array. It's simple but has one gotcha that catches beginners: it returns the new length, not the array itself. Understand that and you'll never be surprised by it again.
How push() Works
const fruits = ["apple", "banana"];
// Add one element:
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]
// Add multiple elements at once:
fruits.push("mango", "grape");
console.log(fruits); // ["apple", "banana", "orange", "mango", "grape"]
// Return value is the new length — NOT the array:
const newLength = fruits.push("kiwi");
console.log(newLength); // 6
console.log(fruits); // ["apple", "banana", "orange", "mango", "grape", "kiwi"]
Real-World Pattern: Building a List Dynamically
// Collecting search results as they arrive:
const results = [];
function addResult(item) {
results.push(item);
console.log(`${results.length} result(s) found so far`);
}
addResult("JavaScript tutorial"); // 1 result(s) found so far
addResult("JS arrays guide"); // 2 result(s) found so far
addResult("push() documentation"); // 3 result(s) found so far
console.log(results);
// ["JavaScript tutorial", "JS arrays guide", "push() documentation"]
push() vs. Other Ways to Add Elements
push(x)— adds to the end; returns new length. Mutates the array.unshift(x)— adds to the front; slower because it shifts all elements.[...arr, x]— creates a new array with x appended; doesn't mutate the original. Preferred in React/functional code.
const original = [1, 2, 3];
// Mutating with push:
original.push(4);
console.log(original); // [1, 2, 3, 4]
// Non-mutating with spread:
const original2 = [1, 2, 3];
const extended = [...original2, 4];
console.log(original2); // [1, 2, 3] — unchanged
console.log(extended); // [1, 2, 3, 4]
Common Mistake: Assigning push()'s Return Value
const arr = [1, 2];
// WRONG — this stores the new length (3), not the array:
const result = arr.push(3);
console.log(result); // 3 (the length, not the array!)
// CORRECT — use push() for the side effect, then reference the array:
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
Stack Pattern: push() + pop()
Arrays with push() and pop() implement a stack — Last In, First Out. This pattern powers undo systems, call stacks, and depth-first search algorithms:
const history = [];
history.push("page1");
history.push("page2");
history.push("page3");
// Go back:
const current = history.pop(); // "page3"
console.log(history); // ["page1", "page2"]
Key Takeaways
push(x)adds elements to the end of an array and returns the new length.- You can push multiple elements at once:
arr.push(a, b, c). push()mutates the original array — use spread[...arr, x]when you need a copy.- Paired with
pop(), it forms the classic stack data structure.
What to Learn Next
With push() mastered, learn its counterpart pop() (remove from end) and then unshift()/shift() (add/remove from front). Once you're comfortable with all four mutation methods, explore immutable patterns using the spread operator and concat() — these are the standard approach in modern React and functional JavaScript.
