How to use .join() with push and replace together?

  • Array.join() Method
    The array.join() method is an inbuilt function in JavaScript which is used to join the elements of an array into a string.The elements of the string will be separated by a specified separator and its default value is comma (, ).


  • Array.push() Method

    The array.push() function is used to push one or more values in an array. This function changes the length of an array by the number of elements added to the array. The syntax of the function is as follows:


    arr.push(element1[, ...[, elementN]])

    Arguments: This function can contain as many numbers of arguments as the number of elements to be inserted into the array.

    Return value: This function returns the new array with new values after inserting the arguments into the array.

  • Array.splice() Method
    The array type in JavaScript provides us with splice () method that replaces the items of an existing array by removing and inserting new elements at the required/desired index.


    array.splice(start_index, delete_count, value1, value2, value3, ...)

Note: Splice() method deletes zero or more elements of an array starting with  the start_index element and replaces those elements with zero or more elements specified in the argument list.

Example: Below is the example to illustrate the use of .join() method with push() method and splice() method together:





<!DOCTYPE html>
            <h1 style="color: green;">
            <h2>use .join() with push and replace together</h2>
            <p>The join() method joins array elements into
              a string.</p>
            <p>The splice() method that helps us in order to
replace the items of an existing array by removing and inserting 
              new elements at the required/desired index.</p>
            <p>The push() method appends a new element to an 
            <button onclick="myFunction()">Push</button>
            <p id="demo"></p>
            <br />
                // Initializing the array
                var fruits = ["Banana", "Orange", "Apple", "Mango"];
                // joining the array elements using .join method
                  "demo").innerHTML = fruits.join(" *");
                function myFunction() {
// splicing the array elements(delete_count=2, which will replace
//("Orange", "Apple" with "Lion", "Horse") using splice() method
                    fruits.splice(1, 2, "Lion", "Horse");
                    document.getElementById("demo").innerHTML = fruits;
// pushing the array elements("Kiwi, Grapes") using push() method
                    fruits.push("Kiwi, Grapes");
                    document.getElementById("demo").innerHTML = fruits;
// expected output [Banana, Lion, Horse, Mango, Kiwi, Grapes]



Before clicking the Push and Splice button:


Output after clicking the Push and Remove button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.

Article Tags :

Be the First to upvote.

Please write to us at to report any issue with the above content.