Skip to content
Related Articles
Open in App
Not now

Related Articles

Create a comma separated list from an array in JavaScript

Improve Article
Save Article
  • Last Updated : 20 Dec, 2022
Improve Article
Save Article

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, the 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, a Separated Comma(, ) is used.

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 that represents the values of the array, separated by a comma.

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

html




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

Output:

 

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

html




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

Output:

 

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

html




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

Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!