Join an array with commas in JavaScript

This post will discuss how to join an array with commas in JavaScript.

To join an array with commas, we need to join the elements of the array with a comma as the separator. For example, the array ["BMW", "Tesla", "Ford"] can be converted to the comma-separated string "BMW,Tesla,Ford". Here are some of the methods that we can use to join an array with commas in JavaScript:

1. Using `Array.join()` function

One way to join an array with commas in JavaScript is to use the Array.join() function. This function takes an optional separator as an argument and returns a new string that is the concatenation of all the elements of the array, separated by the separator. If no separator is provided, the default separator is a comma (,). Here’s an example:

let cars = ["BMW", "Tesla", "Ford"];

// use the join function to create a comma-separated string

let str = cars.join();

console.log(str); // "BMW,Tesla,Ford"

// we can also specify a different separator, such as a space

let str2 = cars.join(" ");

console.log(str2); // "BMW Tesla Ford"

Download Run Code

2. Using `Array.toString()` function

We can also use the Array.toString() function, which returns a string representing the array and its elements. This function actually calls the join() function internally with the default separator, which is a comma. Therefore, this function is equivalent to calling join() without any arguments. Here’s an example:

let cars = ["BMW", "Tesla", "Ford"];

// use the toString function to create a comma-separated string

let str = cars.toString();

console.log(str); // "BMW,Tesla,Ford"

Download Run Code

3. Using template literal

Another option is to enclose the array in a template literal, which will create a string that is the concatenation of the array elements separated by commas. Here’s an example:

let cars = ["BMW", "Tesla", "Ford"];

// Use a template literal to create a comma-separated string

let str = `{cars}`;

console.log(str); // "BMW,Tesla,Ford"

Download Run Code

4. Using `Array.reduce()` function

The Array.reduce() function lets we apply a callback function to each element of an array, accumulating the result in a single value. The callback function has an accumulator, a current element, a current index, and a source array as parameters. We also need to provide an initial value for the accumulator. We can use this function to join an array with commas by using an empty string as the initial value and concatenating each element with a comma to the accumulator. For example:

let cars = ["BMW", "Tesla", "Ford"];

// Use the reduce() function to create a comma-separated string

let str = cars.reduce(function (acc, element, index) {

// Use comma as a separator (except for the last element)

let separator = (index < cars.length - 1) ? ",": "";

// Return the accumulator with the element and separator

return acc + element + separator;

}, ""); // "" is the initial value

console.log(str); // "BMW,Tesla,Ford"

Download Run Code

5. Using custom function

We can also write our own function that takes an array of strings as an argument and returns a comma-separated string. The idea is to use a for loop to iterate over the elements of the array and append them with a comma to a result string. We can also use an if statement to avoid adding a comma after the last element. For example:

function convertArrayToString(array, separator) {

// Initialize an empty string to store the result

let result = "";

// Loop through the array using a for loop

for (let i = 0; i < array.length; i++) {

// Append the element to the result string

result += array[i];

// Append a comma to the result string if it is not the last element

if (i !== array.length - 1) {

result += separator;

}

// Return the result string

return result;

}

let cars = ["BMW", "Tesla", "Ford"];

let str = convertArrayToString(cars, ",");

console.log(str); // "BMW,Tesla,Ford"

Download Run Code

That’s all about joining an array with commas in JavaScript.

Join an array with commas in JavaScript

1. Using Array.join() function

2. Using Array.toString() function

3. Using template literal

4. Using Array.reduce() function

5. Using custom function

Share this:

1. Using `Array.join()` function

2. Using `Array.toString()` function

4. Using `Array.reduce()` function