Skip to main content

How to Convert an Array to a Comma-Separated String in JavaScript

A very common requirement in JavaScript is to convert an array of values into a single, delimited string. The most frequent use case is creating a comma-separated string, for example, to display a list of tags or to generate a simple CSV row. The standard, built-in tool for this task is the Array.prototype.join() method.

This guide will teach you how to use the join() method to convert an array to a string with any separator you need. You will also learn the best practices for handling empty or unwanted values to ensure your output is clean and predictable.

The Core Method: Array.prototype.join()​

The join() method is the definitive tool for this job. It creates and returns a new string by concatenating all of the elements in an array, separated by a specified separator.

Syntax:

array.join(separator)

where

  • separator (optional): A string to separate each pair of adjacent elements of the array. If omitted, the array elements are separated with a comma (,) by default.

Basic Example: Creating a Comma-Separated String​

For example, you have an array of strings and need to display them as a single, comma-separated list. How to convert this array?

// Problem: How to convert this array into "apple, banana, cherry"?
const fruits = ['apple', 'banana', 'cherry'];

Solution:

const fruits = ['apple', 'banana', 'cherry'];

// Using .join() with a comma separator
const commaSeparated = fruits.join(',');
console.log(commaSeparated); // Output: "apple,banana,cherry"

// For better readability, you can add a space
const readableList = fruits.join(', ');
console.log(readableList); // Output: "apple, banana, cherry"

// You can use any separator
const spaceSeparated = fruits.join(' ');
console.log(spaceSeparated); // Output: "apple banana cherry"

How to Handle null, undefined, or Empty String Values​

A common issue arises when your array contains "empty" or unwanted values. The join() method converts null and undefined to empty strings, which can result in confusing output with extra, unwanted separators.

In the following example, the output is messy and incorrect.

const data = ['New York', null, 'London', '', undefined, 'Tokyo'];

const result = data.join(', ');
console.log(result); // Output: "New York, , London, , , Tokyo"

The Solution is to filter the array first.

  • The best practice is to filter out any "falsy" values from the array before joining it. Falsy values in JavaScript include null, undefined, and '' (empty string).
const data = ['New York', null, 'London', '', undefined, 'Tokyo'];

const cleanResult = data
  .filter(element => element) // Or use .filter(Boolean)
  .join(', ');

console.log(cleanResult); // Output: "New York, London, Tokyo"

How it works: The filter(element => element) pattern works because any falsy value in the array will evaluate to false and be removed by the filter, while any non-empty string will evaluate to true and be kept.

Implicit Conversion with .toString() or String()​

You can also convert an array to a comma-separated string by using its toString() method or by passing it to the String() constructor.

const fruits = ['apple', 'banana', 'cherry'];

const str1 = fruits.toString();
console.log(str1); // Output: "apple,banana,cherry"

const str2 = String(fruits);
console.log(str2); // Output: "apple,banana,cherry"
note

While these methods work, they are less explicit than join(). They call array.join() under the hood with the default comma separator. Using join(',') directly is the recommended best practice because it clearly communicates your intent and allows you to easily change the separator if needed.

Conclusion​

For converting an array to a delimited string, the Array.prototype.join() method is the standard, most effective tool in JavaScript.

  • The basic syntax is clear and direct: array.join(separator).
  • For arrays that may contain unwanted empty, null, or undefined values, the recommended best practice is to filter them out first: array.filter(Boolean).join(separator).
  • While .toString() and String() work for comma-separation, join() is more explicit and should be preferred for code clarity.

Table of Contents