Create a comma separated list from an array in JavaScript

Last Updated : 14 May, 2019

Here is a need to convert an array into an object. To do so we are going to use a few of the most preferred methods. First here is a method to know.

Array join() method
This method joins the elements of the array to form a string and returns the new string.
The elements of the array will be separated by a specified separator. If not specified, Default separator comma (, ) is used.
Syntax:
```
array.join(separator)
```
Parameters:
- separator:This parameter is optional. It specifies the separator to be used. If not used, Separated Comma(, ) is used.
Return value:
A String, containing the array values, separated by the specified separator.
Array toString() method
This method converts an array into a String and returns the new string.
Syntax:
```
array.toString()
```
Return value:
It returns a string which represents the values of the array, separated by a comma.

Example-1: This example joins the element of the array by join() method using comma(, ).

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Create comma separated list from an array. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP" style="font-size: 16px;  
                          font-weight: bold;"> 
  
    </p> 
    <button onclick="gfg_Run()"> 
        click here 
    </button> 
    <p id="GFG_DOWN" style="color:green;  
                            font-size: 20px;  
                            font-weight: bold;"> 
    </p> 
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var arr = ["GFG1", "GFG2", "GFG3"]; 
        el_up.innerHTML = 'Original Array = ["' + arr[0] + '", ' 
                                                + arr[1] + '", '  
                                                + arr[2] + '"' 
                                                + ']';; 
  
        function gfg_Run() { 
  
            el_down.innerHTML =  
              "Comma separates list = " + arr.join(", "); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example-2:This example uses the toString() method to convert an array into a comma separated list.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Create comma separated list from an array. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP"
       style="font-size: 16px; 
              font-weight: bold;"> 
  
    </p> 
    <button onclick="gfg_Run()"> 
        click here 
    </button> 
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px; 
                            font-weight: bold;"> 
    </p> 
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var arr = ["GFG1", "GFG2", "GFG3"]; 
        el_up.innerHTML = 'Original Array = ["' + arr[0] + '", ' 
                                                + arr[1] + '", '  
                                                + arr[2] + '"'  
                                                + ']';; 
  
        function gfg_Run() { 
  
            el_down.innerHTML =  
              "Comma separates list = " + arr.toString(); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example-3:This example uses the normal array name and do the same work.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Create comma separated list from an array. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP" style="font-size: 16px;  
                          font-weight: bold;"> 
  
    </p> 
    <button onclick="gfg_Run()"> 
        click here 
    </button> 
    <p id="GFG_DOWN" style="color:green;  
                            font-size: 20px;  
                            font-weight: bold;"> 
    </p> 
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var arr = ["GFG1", "GFG2", "GFG3"]; 
        el_up.innerHTML = 'Original Array = ["' + arr[0] + '", ' 
                                                + arr[1] + '", ' 
                                                + arr[2] + '"'  
                                                + ']';; 
  
        function gfg_Run() { 
  
            el_down.innerHTML =  
              "Comma separates list = " + arr; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Related Articles