JavaScript Array Push

Summary: in this tutorial, you’ll learn how to use the JavaScript Array push() method to add one or more elements to the end of an array.

Introduction to the JavaScript Array push() method

The Array.prototype.push() method adds one or more elements to the end of an array and returns the new array’s length.

The following shows the syntax of the push() method:

push(newElement);
push(newElement1,newElement2);
push(newElement1,newElement2,...,newElementN);

The push() method returns the new value of the length property of the array object on which you call the method.

JavaScript Array push() method examples

Let’s take some examples of using the push() method.

1) Using the array push() to append one element to an array

The following example adds the number 40 to the end of the numbers array:

let numbers = [10, 20, 30];

const length = numbers.push(40);

console.log(length);
console.log(numbers);
Code language: JavaScript (javascript)

Output:

4
[ 10, 20, 30, 40 ]Code language: JSON / JSON with Comments (json)

How it works.

First, define the numbers array that has three numbers:

let numbers = [10, 20, 30];Code language: JavaScript (javascript)

Second, add the number 40 to the end of the numbers array using the push() method and assign the return value to the length variable:

const length = numbers.push(40);Code language: JavaScript (javascript)

Third, output the length variable and the numbers array:

console.log(length);
console.log(numbers);Code language: JavaScript (javascript)

The following picture illustrates how the example works:

2) Using the array push() to add multiple elements to the end of an array

The following example shows how to use the push() method to add multiple elements to the end of an array:

let numbers = [10, 20, 30];

const length = numbers.push(40, 50);

console.log(length);
console.log(numbers);Code language: JavaScript (javascript)

Output:

5
[ 10, 20, 30, 40, 50 ]Code language: JSON / JSON with Comments (json)

The following picture illustrates how it works:

3) Using the push() to append elements of an array to another array

Suppose you have two arrays colors and cmyk:

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];Code language: JavaScript (javascript)

And you want to append the elements of the cmyk to the colors array.

To do that, you may use a for...of loop that iterates over the elements of the cmyk array and use the push() method to append each element to the colors array like this:

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

for (const color of cmyk) {
  colors.push(color);
}

console.log(colors);Code language: JavaScript (javascript)

Output:

['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'back']Code language: JSON / JSON with Comments (json)

Starting from ES6, you can use the spread operator (...) to spread the elements of the cmyk array and push them to the colors array at the same time like this:

let colors = ['red', 'green', 'blue'];
let cmyk = ['cyan', 'magenta', 'yellow', 'back'];

colors.push(...cmyk);

console.log(colors);
Code language: JavaScript (javascript)

Using JavaScript Array push() method with array-like objects

The Array.prototype.push() method is designed to be generic on purpose. Therefore, you can call the push() method with the call() or apply() on the array-like objects.

Under the hood, the push() method uses the length property to determine the position for inserting the elements. If the push() method cannot convert the length property into a number, it’ll use 0 as the value for the index.

See the following example:

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append(message) {
    [].push.call(this, message);
  },
};
greetings.append('Howdy');
greetings.append('Bonjour');

console.log(greetings);
Code language: JavaScript (javascript)

Output:

{
  '0': 'Hi',
  '1': 'Hello',
  '2': 'Howdy',
  '3': 'Bonjour',
  length: 4,
  add: [Function: add]
}Code language: JavaScript (javascript)

How it works.

First, define the greetings object that has three properties 1, 2, and length and one method append():

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append(message) {
    [].push.call(this, message);
  },
};Code language: JavaScript (javascript)

The append() method calls the push() method of an array object to append the message to the greetings object.

Second, call append() method of the greetings object:

greetings.append('Howdy');
greetings.append('Bonjour');Code language: JavaScript (javascript)

In each call, the push() uses the length property of the greetings object to determine the position where it appends the new element and increases the length property by one.

As a result, the greetings object has two more elements at the index 2 and 3. And the length property is 4 after the calls.

Third, output the greetings object to the console:

console.log(greetings);Code language: JavaScript (javascript)

To allow the append() method to accepts a number of messages, you can modify the method like this:

let greetings = {
  0: 'Hi',
  1: 'Hello',
  length: 2,
  append() {
    [].push.call(this, ...arguments);
  },
};
greetings.append('Howdy', 'Bonjour');

console.log(greetings);
Code language: JavaScript (javascript)

How it works.

First, remove the message parameter from the append method.

Second, spread out the elements of the arguments object and push them to the greetings object.

Summary

  • Use the JavaScript array push() method to append one or more elements to an array.
  • The push() method also works with an array-like object.
Was this tutorial helpful ?