Definition and Usage

The push() function adds one or more elements to the end of an array—essentially "pushing" them onto it, like stacking items. This also increases the array's length.

This function does not return a new array; instead, it modifies the original array directly.
Additionally, it returns an integer representing the array's new length after the elements have been added.

Basic Example

JavaScript 
const arr = [1, 2, 3];

// Add a single element to the end of the array
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

// Add multiple elements to the end of the array
arr.push(5, 6, 7);
console.log(arr); // Output: [1, 2, 3, 4, 5, 6, 7]

Syntax

JavaScript 
arr.push(element1)
arr.push(element1, element2)
arr.push(element1, element2, /* …, */ elementN)

arr refers to the array on which the push() function is being called.

Parameters

Parameters of the push() function
element1, ..., elementN One or more elements to add to the end of the array.
You can specify multiple values to be added in order.

Return Value

The return value represents the total number of elements in the array after the new elements have been added. This value is returned as an integer (e.g., 1, 2, 3, ...).

JavaScript 
const arr = [1, 2, 3];

// Add a new element to the end of the array and store the return
const totalElements = arr.push(4);
console.log(totalElements); // Output: 4

Practical Examples

Here are some examples of how to use the push() function.

Adding a Single Element

To add a single element to an array, pass the element as an argument to the push() function.

JavaScript 
const fruits = ["apple", "banana", "cherry"];

// Add one element to the end of the array
fruits.push("date");

// Check the contents of the array
console.log(fruits); // Output: ['apple', 'banana', 'cherry', 'date']

Adding Multiple Elements

To add multiple elements to an array, simply pass them as separate arguments to the push() function, separated by commas.

JavaScript 
const fruits = ["apple", "banana", "cherry"];

// Add elements to the end of the array
fruits.push("date", "elderberry");

// Print the updated array
console.log(fruits); // Output: ['apple', 'banana', 'cherry', 'date', 'elderberry']

Adding Objects

You can also use the push() function to add objects to an array, just like adding regular elements. Here's an example:

JavaScript 
const myArray = []; // Create an empty array

const object1 = {name: "John", age: 30};
const object2 = {name: "Jane", age: 25};

myArray.push(object1); // Add object to the end of the array
myArray.push(object2);

console.log(myArray);
// Output: [{name: 'John', age: 30}, {name: 'Jane', age: 25}]

Alternative Ways to Add Elements to an Array Without Using push()

While the push() function is the most common and convenient way to add elements to the end of an array in JavaScript, there are several alternative approaches. Here are a few common methods:

  • Using the concat() function
  • Using the spread syntax
  • Using the length property

Using the concat() Function

The concat() function can be used to create a new array that includes the original elements along with the new values. This function does not modify the original array, but returns a new one.

JavaScript 
const arr = [1, 2, 3];
const newArr = arr.concat(4);
console.log(newArr); // Output: [1, 2, 3, 4]

Code Explanation
The concat() function of an array returns a new array by combining two or more arrays in sequence. If the argument is not an array, it simply appends the value to the end of the original array.

Using the Spread Syntax

You can use the spread syntax to add elements to an array by creating a new array that includes the original values followed by the new ones.

JavaScript 
const arr = [1, 2, 3];
const newItem = 4;
const newArr = [...arr, newItem];
console.log(newArr); // Output: [1, 2, 3, 4]

Code Explanation
The spread syntax (...) allows you to expand the elements of an array into individual elements. It's a concise and readable way to build new arrays from existing ones.

Using the length Property

You can add a new element to the end of an array by using its length property. This works because the value of length always represents the number of elements in the array, which also corresponds to the index position where the next element can be placed. By assigning a value to arr[arr.length], you're effectively adding an item to the next available index.

JavaScript 
const arr = [1, 2, 3];
arr[arr.length] = 4;
console.log(arr); // Output: [1, 2, 3, 4]

This function is concise for adding a single element, but it becomes less convenient when you need to add multiple elements, as it typically requires a loop or additional logic.

Specifications

Specification for JavaScript Array push() Function
Specification
push() ECMAScript Language Specification
#sec-array.prototype.push

Browser compatibility

Browser compatibility for JavaScript Array push() Function
Method
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
push() 1 12 1 1

References

See also