Skip to main content

push() in JavaScript – Add Items to End of Array

Whenever you use push() on an array, the method does the following:

  1. It adds its arguments to the end of its calling array.
  2. It returns the calling array's new length.
note
  • A calling array is an array on which you used push(). So, in bestColorsList.push(), bestColorsList is the calling array.
  • push() is sometimes written as Array.prototype.push() because it is a method of the Array object's prototype property.

Syntax of the push() Method​

push() accepts one or more arguments. Here is the syntax:

callingArray.push(item1, item2, ..., itemX)

The item1, item2, ..., itemX arguments represent the items you wish to add to the end of the calling array.

Let's see precisely how push() works with some examples.

Example 1: Use push() to Add One New Item to the End of an Array​

// Define an array:
const numbersArray = [1, 2, 3, 4];

// Push a new item to the end of the numbersArray:
numbersArray.push(5);

// Check the numbersArray's current content:
console.log(numbersArray);

// The invocation above will return:
[1, 2, 3, 4, 5];

Try it on StackBlitz

The snippet above used push() to append an item (5) to the end of the calling array.

Let's consider another example.

Example 2: Use push() to Add Three New Items to the End of an Array​

const fruitsArray = ["Mango", "Apple"];
const totalFruits = fruitsArray.push("Orange", "Lemon", "Grape");

console.log(fruitsArray);

// The fruitsArray's invocation above will return:
["Mango", "Apple", "Orange", "Lemon", "Grape"];

console.log(totalFruits);

// The totalFruits' invocation above will return: 5

Try it on StackBlitz

In the snippet above, the totalFruits' invocation returned 5 because push() returned the calling array's new length.

Keep in mind that you can also use JavaScript's length property to add new items to the end of an array object. Let's discuss how below.

How to Use JavaScript's length Property to Add Items to the End of an Array Object​

You can use JavaScript's length property to append a new item to the end of an array like so:

// Define an array:
const numbersArray = [1, 2, 3, 4];

// Push a new item to the end of the numbersArray:
numbersArray[numbersArray.length] = 30;

// Check the numbersArray's current content:
console.log(numbersArray);

// The invocation above will return:
[1, 2, 3, 4, 30];

Try it on StackBlitz

In the snippet above, we used the length property to specify the index position we wish to insert the new item (30).

In other words, since numbersArray.length will return the number of items currently in the calling array, numbersArray[numbersArray.length] is equivalent to numbersArray[4].

Therefore, the numbersArray[numbersArray.length] = 30 code tells the computer to place 30 at numbersArray's fourth index position.

So, what exactly is the difference between the length property and the push() method. Let's find out.

push() vs. length: What's the Difference Between the Two Ways of Adding Items to the End of an Array?​

JavaScript's length property can add only a single item per time into an array object. However, push() can add multiple items.

Here's an example:

const numbers = [1, 2];
const colors = ["Blue", "Red"];

numbers.push(3, 4, 5, 6, 7);
colors[colors.length] = "Indigo";

console.log(numbers); // [1, 2, 3, 4, 5, 6, 7]
console.log(colors); // ["Blue", "Red", Indigo]

Try it on StackBlitz

Notice that push() permits adding multiple values to an array. However, length allows only a single item per time.

note
  • Use unshift() to add new items to the beginning of an array object.
  • You can use JavaScript's shift() method to remove an array's first item.
  • To remove an array's last item, use pop().

Overview​

This article discussed what JavaScript's push() method does. We also used examples to see how it works.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter