Syntax
The syntax for the push() method is simple:
array.push(element1, element2, ..., elementN);
- array: The array to which you want to add elements.
- element1, element2, ..., elementN: The elements you want to add to the array. You can add one or more elements at a time.
Parameters
The push() method accepts one or more parameters:
Element(s): The value(s) you want to add to the end of the array. These can be any valid JavaScript data types (e.g., strings, numbers, objects, etc.). You can add multiple elements by separating them with commas.
Example
let arr = [1, 2, 3];
arr.push(4); // Adds one element
arr.push(5, 6); // Adds two elements
Return Value
The push() method returns the new length of the array after the elements have been added. This is useful when you need to keep track of the array's length.
Example:
let arr = [1, 2];
let newLength = arr.push(3);
console.log(newLength);
You can also try this code with Online Javascript Compiler
Output:
3
In this example, the push() method adds the number 3 to the array, and the new length of the array is returned as 3.
Examples:
Here are some examples to help you understand the usage of the push() method:
Example 1: Adding a Single Element
let fruits = ['apple', 'banana', 'cherry'];
fruits.push('orange');
console.log(fruits);
You can also try this code with Online Javascript Compiler
Output:
['apple', 'banana', 'cherry', 'orange']
In this example, the push() method adds 'orange' to the end of the fruits array.
Example 2: Adding Multiple Elements
let numbers = [1, 2, 3];
numbers.push(4, 5, 6);
console.log(numbers);
You can also try this code with Online Javascript Compiler
Output:
[1, 2, 3, 4, 5, 6]
Here, multiple elements are added to the numbers array at once. The push() method accepts more than one argument.
Example 3: Pushing Different Data Types
let mixedArray = [1, 'apple', true];
mixedArray.push({ name: 'John' }, [1, 2, 3]);
console.log(mixedArray);
You can also try this code with Online Javascript Compiler
Output:
[1, 'apple', true, { name: 'John' }, [1, 2, 3]]
In this example, the push() method adds an object and an array to the mixedArray.
Additions of Items
The push() method is used to add one or more elements to the end of an JavaScript array. The syntax is:
array.push(item1, item2, ..., itemN)
Here, `item1`, `item2`, up to `itemN` are the elements to be added to the end of the `array`. push() modifies the original array & returns the new length of the array.
For example:
let fruits = ['apple', 'banana'];
console.log(fruits);
let newLength = fruits.push('orange');
console.log(fruits);
console.log(newLength);
You can also try this code with Online Javascript Compiler
Output:
['apple', 'banana']
['apple', 'banana', 'orange']
3
In this code, we start with an array `fruits` containing two elements. We use push() to add the element `'orange'` to the end of the array. After the push() operation, `fruits` now contains three elements, & the new length of the array is returned & stored in the `newLength` variable.
You can also add multiple elements in a single push() call:
let numbers = [1, 2, 3];
numbers.push(4, 5, 6);
console.log(numbers);
You can also try this code with Online Javascript Compiler
Output:
[1, 2, 3, 4, 5, 6]
Here, we add three elements (`4`, `5`, & `6`) to the `numbers` array using a single push() call.
Merger of Arrays
You can also use the push() method to merge two or more arrays. When you pass an array as an argument to push(), the elements of that array are individually added to the end of the original array.
For example:
let vegetables = ['carrot', 'broccoli'];
let meats = ['chicken', 'beef'];
vegetables.push(...meats);
console.log(vegetables);
You can also try this code with Online Javascript Compiler
Output:
['carrot', 'broccoli', 'chicken', 'beef']
In this code, we have two arrays: `vegetables` and `meats`. We use the spread operator (`...`) to pass the elements of the `meats` array individually to the push() method. As a result, each element of `meats` is added to the end of the `vegetables` array.
Note that using push() with the spread operator only adds the elements of the passed array, not the array itself. If you directly pass an array to push() without the spread operator, it will be added as a single element (a nested array) to the original array:
let fruits = ['apple', 'banana'];
let moreFruits = ['orange', 'grape'];
fruits.push(moreFruits);
console.log(fruits);
You can also try this code with Online Javascript Compiler
Output:
['apple', 'banana', ['orange', 'grape']]
In this case, the entire `moreFruits` array is added as a single element to the `fruits` array, resulting in a nested array structure.
JavaScript Array push() Method Use Case
Let’s have a look at a practical example where we can use the push() method in a real-world scenario. Suppose you're building a to-do list application where users can add tasks to their list. The push() method is perfect for adding new tasks to the list.
let todoList = ['Buy groceries', 'Clean the house'];
function addTask(task) {
todoList.push(task); // Adds a new task to the array
console.log('Updated Todo List:', todoList);
}
addTask('Finish homework'); // Output: Updated Todo List: ['Buy groceries', 'Clean the house', 'Finish homework']
addTask('Go to gym'); // Output: Updated Todo List: ['Buy groceries', 'Clean the house', 'Finish homework', 'Go to gym']
In this example, the addTask() function adds new tasks to the todoList array every time it is called.
Supported Browsers
The push() method is widely supported by all modern browsers, including:
- Google Chrome
- Mozilla Firefox
- Safari
- Edge
- Opera
It is also supported in Internet Explorer 9 and later versions. The method is part of the ECMAScript 5 (ES5) standard, which means that it works in most JavaScript environments, including Node.js.
Frequently Asked Questions:
What does the push() method do in JavaScript?
The push() method adds one or more elements to the end of an array and returns the new length of the array.
Can I add multiple elements using the push() method?
Yes, you can add multiple elements to an array in a single push() method call by separating them with commas.
Does the push() method modify the original array?
Yes, the push() method modifies the original array by adding the new elements to it. The method does not create a new array.
Conclusion
In this article, we have discussed the JavaScript push() method in detail. You learned about its syntax, parameters, return value, and how to use it with examples. We also looked at a practical use case of adding tasks to a to-do list. The push() method is a useful tool when you need to add elements to an array, and it is supported by all modern browsers.
You can also check out our other blogs on Code360.
84+ registered