How to Convert an Array to a String with Commas in JavaScript

You can use a built-in function on the Array prototype to join together an array as a string separated by commas in JavaScript.

Join Together Array Items as a String in JavaScript

One of JavaScript’s most helpful built-in array methods is .join() (Array.prototype.join()), which returns a string primitive.

“The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string.” — MDN Docs

You can use any separator you want. In fact, the separator string can be anything at all, of any number of characters.

That means it’s easy to turn your JavaScript array into a comma-separated list format, whether you’d like to add just a comma or a comma and a space.

String with Just Commas

When you want just the comma character (,) to appear as the separator between items in the list, use .join(",") to convert the array to a string.

As you can see, there will never be an extra comma after the last item, meaning your entire array is now joined together as one string.

String with Comma and a Space

You can actually specify any separator you want to occur between the list items, so you can add both a comma and a space with .join(", ").

A list with commas and a space is definitely going to be more readable if it’s something you’re planning to look at on a screen.

The Default .join() Is Comma No Space

If you just need a comma without a space, like when you’re creating a comma-separated values (CSV file) with values separated by one comma, then you can use .join() (Array.prototype.join()) with no arguments:

That default .join() behavior is something you’d have to memorize. I recommend always using .join(",") to help keep your code simple.

Special Cases When Joining Arrays with Commas

You can probably already guess what .join() will return when you call it on an array with only one item in it: you get that item back as a string.

“If the array has only one item, then that item will be returned without using the separator.” — MDN Docs

If the array is empty, then you’ll get the empty string ("") as the result of calling .join(): [].join()==="" // true.

“If arr.length is 0, the empty string is returned.” — MDN Docs

You will also get the empty string ("") to replace any individual element in the array is undefined, null, or an empty array ([]).

“If an element is undefined, null or an empty array [], it is converted to an empty string.” — MDN Docs

You could end up with extra commas when you don’t want them if you have any null or undefined values in the array.

On the flip-side, maybe you do want missing items. If so, you can specify which items are missing with empty strings (""), undefined, or null.

Join Together an Array as a String with Commas

When you need to join together every item in a JavaScript array to form a comma-separated list of values, use .join(",") or equivalently just .join() without any arguments at all. The result will always be a string.

A word to the wise is that .join() (Array.prototype.join()) uses the “string conversions” of the items found in the array.

“[Description of join():] The string conversions of all array elements are joined into one string.” — MDN Docs

That means you need to be aware of the .toString() methods, such as Array.prototype.toString(), for any objects you have in the array.

For primitive values like numbers, strings, and booleans, then they’ll all be type coerced to strings by .join().

If you’d rather your items be separated by a comma and a space, the syntax is: .join(", "). But don’t use .join("") with the empty string (""), because that will return every item stitched together without a separator.

Hopefully this tutorial has helped you understand converting arrays into comma-separated strings in JavaScript.

Happy coding! 👨‍🎤🌟👍🌞😊

Dr. Derek Austin is the author of Career Programming: How You Can Become a Successful 6-Figure Programmer in 6 Months, now available on Amazon.