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> 