JavaScript Reference
Array.prototype.push()
Add elements to the end of an array. Returns the new length.
Last updated: October 2026
Definition: Array.prototype.push() adds one or more elements to the end of an array and returns the new length. It mutates the original array in place.
🎬 Live Example
Five push patterns. Click any button to see the output.
💡 push mutates in place and returns the new length, not the array.
Basic Syntax
array.push(element1, element2, ...)
// Returns the new length of the array
// Mutates the original array🎯 Syntax & Parameters
| Parameter | Type | Description |
|---|---|---|
elementN | any | One or more elements to add. Optional. |
Add a Single Element
const fruits = ['apple', 'banana'];
fruits.push('cherry');
// fruits: ['apple', 'banana', 'cherry']Add Multiple Elements
const nums = [1, 2];
nums.push(3, 4, 5);
// nums: [1, 2, 3, 4, 5]Pro tip: Order is preserved — 3, then 4, then 5.
Push vs Push Spread
const arr = [1, 2];
const other = [3, 4];
arr.push(other);
// arr: [1, 2, [3, 4]] ❌ nested array
arr.push(...other);
// arr: [1, 2, 3, 4] ✅ flattenedWatch out: push(arr) adds the array as a single element. Use spread push(...arr) to merge flat.
Return Value Trap
const arr = [1, 2, 3];
const result = arr.push(4);
console.log(result); // 4 ← the NEW LENGTH
console.log(arr); // [1, 2, 3, 4]
// ❌ Chainable mistake:
arr.push(5).push(6); // TypeError: 5.push is not a functionReal-World: Building a Todo List
const todos = [];
function addTodo(text) {
todos.push({
id: todos.length + 1,
text,
done: false
});
}
addTodo('Buy milk');
addTodo('Walk dog');
// todos: [{id:1,...}, {id:2,...}]In React/Vue, avoid mutating state directly — use spread: setTodos([...todos, newItem]).
🎯 push vs unshift vs concat vs spread
| Method | Mutates? | Use when |
|---|---|---|
push | Yes | Add to end (mutating) |
unshift | Yes | Add to start (mutating) |
concat | No | Merge arrays (immutable) |
[...a, ...b] | No | Modern immutable merge |
⚠️ Common Mistakes
- Expecting push to return the array. It returns the new length.
- Chaining
.push().push(). Throws TypeError — push returns a number. - Pushing an array into itself.
arr.push(arr)creates a circular reference — no crash but infinite when serialized. - Mutating React state with push. Use
[...state, item]instead. - Using push when you want immutability. Consider
concator spread. - Assuming push rejects duplicates. It doesn't — use a Set for that.
❓ Frequently Asked Questions
What does Array.push() do in JavaScript?
Array.push() adds one or more elements to the end of an array and returns the new length of the array. It mutates the original array in place.
Does push return the new array?
No. push returns the new length (a number), not the array itself. This is a common source of bugs when chaining methods.
What is the difference between push and concat?
push mutates the original array and adds elements to it. concat returns a new array without modifying the original. Use push for in-place additions, concat for immutable merging.
Can push add multiple elements at once?
Yes. push accepts any number of arguments: arr.push(a, b, c) adds three elements in order and returns the new length.
Can I push an array into another array?
Yes, but it will be added as a single nested element. To merge arrays flat, use spread: arr.push(...otherArray) or use concat.