Create a Comma Separated List from an Array in JavaScript

Creating a comma-separated list from an array is a common task in JavaScript, especially when formatting data for display, creating CSV strings, or sending readable outputs to users or servers. Over 75% of JavaScript applications use some form of array-to-string conversion for logging, UI rendering, or data transmission. JavaScript provides simple and best methods like .join() to seamlessly transform arrays into well-formatted, comma-separated strings.

Here are the different methods to create a comma-separated list from an Array

1. Array join() method

The Array join() 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.

let a = ["GFG1", "GFG2", "GFG3"];
function fun() {
    console.log("Comma Separates List: " + a.join(", "));
}
fun();

Output

Code Overview

• The code defines an array containing three elements: "GFG1", "GFG2", and "GFG3".
• The function uses a.join(", ") to create a comma-separated list of the array elements and log it to the console.

2. Array toString() method

Array toString() method converts an array into a String and returns the new string. It returns a string that represents the values of the array, separated by a comma.

let a = ["GFG1", "GFG2", "GFG3"];
function fun() {
    console.log("Comma Separated List: " + a.toString());
}
fun();

Output

Code Overview

• The code defines an array with elements "GFG1", "GFG2", and "GFG3".
• The function uses the toString() method to convert the array into a string, with the elements separated by commas by default.

3. Using Array literals

Array literals is the list of expressions containing array elements separated with commas enclosed with square brackets. 

let a = ["GFG1", "GFG2", "GFG3"];
function fun() {
    console.log("Comma Separated List: " + a);
}
fun();

Output

Code Overview

• The code defines an array with elements "GFG1", "GFG2", and "GFG3" using an array literal.
• The function directly logs the array arr to the console. When an array is logged as a string, JavaScript automatically converts it to a comma-separated list.

4. Using Lodash _.join() method

Lodash _.join() method return the list of given array with "," separation.

// Requiring the lodash library 
let _ = require("lodash");
let a = [1, 2, 3, 4, 5, 6];
let newA = _.join(a);
console.log("After Join: " + newA);

Output

Code Overview

• The code imports the lodash library using require("lodash"), enabling access to its utility functions.
• The _.join(array) function from Lodash is used to join the elements of the array into a string, with the default separator being a comma.

5. Using map() and join()

To create a comma-separated list from an array using map() and join(), first convert each array element to a string using map(String), then join these strings into a single string separated by commas using join(',').

const a = [1, 2, 3, 4, 5];
const comma = a.map(String).join(',');
console.log(comma); 

Output

Code Overview

• The code uses map(String) to convert each element of the array arr into a string, and then join(',') joins these string elements with commas.
• The result is a comma-separated string "1,2,3,4,5", which is logged to the console.