Skip to main content

The push() method

JavaScriptJunior~2 min read
Suggest an edit

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

QuestionAnswer
What it doesAppends elements to the end of the array
Does it change the original arrayYes, it mutates it
What it returnsThe new length of the array
Can it add several elementsYes
Examplearr.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.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit