Create a comma separated list from an array in JavaScript

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(, ).

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the 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 contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.