JavaScript - push() method

revision:

Category : array

The push() method adds the specified elements to the end of an array and returns the new length of the array.

It adds new items to the end of an array, changes the length of the array, and returns the new length.

Syntax : 

        array.push()
        array.push(element0)
        array.push(element0, element1)
        array.push(element0, element1, /* … ,*/ elementN)

Parameters:

elementN : the element(s) to add to the end of the array. Minimum one item is required.

Examples: 

            const animals = ['pigs', 'goats', 'sheep'];
            const count = animals.push('cows');
            console.log(count);
            // Expected output: 4
            console.log(animals);
            // Expected output: Array ["pigs", "goats", "sheep", "cows"]
            animals.push('chickens', 'cats', 'dogs');
            console.log(animals);
            // Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

Practical examples

example: adding elements to an array.

code: 
                    <div>
                        <p id="push-1"></p>
                        <p id="push-2"></p>
                        <p id="push-3"></p>
                    </div>
                    <script>
                        const sports = [" soccer", " baseball"];
                        document.getElementById("push-1").textContent = "sports : " + sports;
                        const total = sports.push(" football", " swimming");
                        console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
                        console.log(total); // 4
                        document.getElementById("push-2").textContent = "sports : " + sports;
                        document.getElementById("push-3").textContent = "total sports : " + total;
                    </script>

example: merging two arrays

code: 
                    <div>
                        <p id="push-4"></p>
                        <p id="push-5"></p>
                        <p id="push-6"></p>
                    </div>
                    <script>
                            const vegetables = ["parsnip ", "potato "];
                            const moreVegs = ["celery ", "beetroot "];
                            document.getElementById("push-4").innerHTML = "vegetables : " + vegetables;
                            document.getElementById("push-5").innerHTML = "vegetables : " + moreVegs;
                            // Merge the second array into the first one
                            vegetables.push(...moreVegs);
                            console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']
                            document.getElementById("push-5").innerHTML = "vegetables + moreVegs: " + vegetables;
                    </script>

example: add new items to an array.

push() adds new items to the end of an array:

code: 
                    <div>
                        <p>push() adds new items to the end of an array:</p>
                        <p id="push-7"></p>
                        <p id="push-8"></p>
                        <p id="push-9"></p>
                        <p id="push-10"></p>
                        <p id="push-11"></p>
                    </div>
                    <script>
                        const fruits = [" Banana", " Orange", " Apple", " Mango"];
                        document.getElementById("push-7").innerHTML = "array start: " + fruits;
                        fruits.push(" Kiwi");
                        document.getElementById("push-8").innerHTML = "array after first push : " + fruits;
                        fruits.push(" Strawberry", " Lemon");
                        document.getElementById("push-9").innerHTML = "array after second push : " + fruits;
                        document.getElementById("push-10").innerHTML = "number of fruits: " + fruits.length;
                        document.getElementById("push-11").innerHTML = " new length of fruits after final push : " + fruits.push("");
                    </script>