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

Create a comma separated list from an array in JavaScript