JavaScript array push | method | Add an ele​men​t to the array

JavaScript array push Method is added a new element in the array and returns an updated new length. The new element will be added ad the end of the JS Array. This method will also change the array length property.

JavaScript array push method

Syntax

Simple syntax of adding an element in an array using push() method.

array.push(element1, element2, ..., elementX)

Parameters

elementN – The elements which will add in the array (at the end).

Return value

A new array length property based on which method called.

JavaScript array push example

Let’s see the example of the Add element to Array JavaScript. In the example, We have one array with 3 fruit as an element. Now you want to add one more fruit to the list.

For adding new element (fruit) in the array we create a function– “myFunction()”. The function using an Array push method. To trigger this function we implement one button.

<!DOCTYPE html>
<html>
    <body>
        
        <button onclick="myFunction()">Add a new Fruit</button>
        
        <p id="demo"></p>
        
        <script>
            var fruits = ["Apple", "Banana", "Mango"];
            document.getElementById("demo").innerHTML = fruits;
            
            function myFunction() {
                fruits.push("Kiwi");
                document.getElementById("demo").innerHTML = fruits;
            }
        </script>
        
    </body>
</html>

Output: In the gif file, click on the adding button. Array showed in p tag, how the new item is added. If you click more than once it will also be added to the array.

Add an element to the array example

How to Add Multiple Items in an Array

In an upper example, you see only ad single item at a time in Array. Adding a Multiple Item in the JS array has to follow the same step. I just need to add more elements to the push method.

var a = [];
    
a.push(1, 2, 3);

Complete code example:-

<!DOCTYPE html>
<html>
    <body>
        
        <button onclick="myFunction()">Add a new Fruit</button>
        
        <p id="demo"></p>
        
        <script>
            var fruits = ["Apple"];
            document.getElementById("demo").innerHTML = fruits;
            
            function myFunction() {
                fruits.push("Banana", "Mango","Kiwi");
                document.getElementById("demo").innerHTML = fruits;
            }
        </script>
        
    </body>
</html>

Output:

Add Multiple Items in an Array javascript

JavaScript array push key value

You have a key-value pair element array then still you can use the push() method. See the below JavaScript array push key-value pair code snippet.

items=[{'id':1},{'id':2},{'id':3},{'id':4}];
items.push({'id':5});

JavaScript push array into an array

Does is it possible in JavaScript array push array?

Yes, it’s possible using a for a loop. Like the below code line.

for(var i = 0; i<Length; i++){
                    arr1.push(arr2[i]);
                }

Complete code: You have to count the length of the array and run the for loop statement. It will iterate every element of the array. Just use the push method to add every element from another array the same way until all elements are counted.

<!DOCTYPE html>
<html>
    <body>
        
        <button onclick="myFunction()">Add a new item</button>
        
        <p id="demo"></p>
        
        <script>
            arr1=[1,2];
            document.getElementById("demo").innerHTML = arr1;
            
            function myFunction() {
                arr2 = [3,4]
                var count = arr2.length;
                for(var i = 0; i<count; i++){
                    arr1.push(arr2[i]);
                    
                }
                document.getElementById("demo").innerHTML = arr1;
                
            }
        </script>
        
    </body>
</html>

Output:

JavaScript push array into an array

Question: How to JavaScript array push front?

Answer: To add items at the beginning (front/start) of a js array, use the unshift() method. See below the code line for it.

array.unshift("element")

Bonus: How to Remove the last​ element from the array tutorial – https://tutorial.eyehunts.com//js/javascript-array-pop-method-remove-las-element/

And for all type methods to remove elements follow this Link – https://tutorial.eyehunts.com//js/remove-element-from-array-javascript-first-last-value-key-index/

Do comment if you have any doubts and suggestions on this tutorial.

Note: The All Javascript array push method Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.