Suggest an edit

Improve this article

Refine the answer for “The push() method”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`push()` appends one or more elements to the end of an array and returns that array's new length.** It is one of the most frequently used methods in JavaScript, and the key thing to remember is that it changes the original array while returning a number.

## Theory

### TL;DR
- Adds elements **to the end** of the array.
- **Mutates** the original array; it does not create a new one.
- Returns the **new length** of the array, that is a number, not the array itself.
- Accepts any number of arguments: `arr.push(3, 4, 5)`.
- The non-mutating alternative is spread: `const newArr = [...arr, 3]`.

### Quick example
```javascript
const fruits = ["apple", "banana"];
const newLength = fruits.push("cherry");

console.log(fruits);    // ["apple", "banana", "cherry"]
console.log(newLength); // 3
```

Note that:

- The method **changes the original array, it mutates it**.
- It returns not the array itself but the **number of elements after the addition**.

### Several elements in one call
`push()` takes any number of arguments and appends them in order.

```javascript
const arr = [1, 2];
arr.push(3, 4, 5);

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

### How the method behaves
- Elements are added **to the end of the array**.
- The indexes of the new elements start at the current value of `length`.
- The returned value is the new value of `arr.length`.

So for an array of two elements the first appended item gets index `2`, the next one `3`, and so on.

### Important details
- `push()` works **only with arrays** or with array-like objects, for example through `Array.prototype.push.call(arrayLike, value)`.
- If you write `arr = arr.push(...)` you **lose the array itself**, because the variable now holds a number:

```javascript
  let arr = [1, 2];
  arr = arr.push(3); // arr now holds the number 3, the array is lost
  console.log(arr);  // 3
  ```

If the array was declared with `const`, that line throws `TypeError: Assignment to constant variable` outright. That is a good thing: the mistake is visible immediately.

### Summary table

| Question | Answer |
| --- | --- |
| What it does | Appends elements to the end of the array |
| Does it change the original array | Yes, it mutates it |
| What it returns | The new length of the array |
| Can it add several elements | Yes |
| Example | `arr.push(1, 2, 3)` |

### The non-mutating alternative
When you need to add an element **without changing the original**, for example in React state or in a Redux reducer, use spread:

```javascript
const arr = [1, 2];
const newArr = [...arr, 3];

console.log(newArr); // [1, 2, 3]
console.log(arr);    // [1, 2] (unchanged)
```

This creates a new array, so a reference comparison detects the change and the component re-renders.

### Common mistakes
- **Assigning the result back:** `arr = arr.push(x)` turns the variable into a number and destroys the reference to the array.
- **Expecting a new array.** `push()` does not return an array, so the chain `arr.push(1).push(2)` throws: a number has no `push` method.
- **Mutating state directly.** In React, `state.push(item)` will not trigger a re-render because the array reference did not change. You need `[...state, item]`.
- **Confusing `push()` with `concat()`.** `concat()` does not mutate and returns a new array; `push()` mutates and returns a length.
- **Spreading an array into an array by accident.** `arr.push([1, 2])` adds a single element, a nested array. To append the items one by one you need `arr.push(...[1, 2])`.
- **Calling `push()` on a string.** Strings are immutable and have no `push` method.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts602 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.