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.