Skip to content
Related Articles

Related Articles

How to use .join() with push and replace together?
  • Last Updated : 11 Jun, 2020
  • 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 (, ).

    Syntax:

    array.join(separator)
    
  • 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:

    Syntax:



    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.

     Syntax:

    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>
<html>
    <body>
        <center>
            <h1 style="color: green;">
              GeeksForGeeks
          </h1>
  
            <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 
              array.</p>
            <button onclick="myFunction()">Push</button>
            <p id="demo"></p>
            <br />
            <script>
                // Initializing the array
                var fruits = ["Banana", "Orange", "Apple", "Mango"];
                // joining the array elements using .join method
                document.getElementById(
                  "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]
                }
            </script>
        </center>
    </body>
</html>

Output:

Before clicking the Push and Splice button:
 

 

Output after clicking the Push and Remove button:
 

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :