Create a comma separated list from an array in JavaScript

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() methodThis 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.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() methodThis 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.
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:
javascript-array
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?