Converting Arrays to Strings in JavaScript

Arrays are a powerful feature of any language. They let you house multiple pieces of information easily. They will maintain the order of items being added and can even be sorted. In modern web browsers, they even handle auto-magically converting themselves into human readable strings.

Even with the modern niceties, it’s still good to know how to convert an array to a string for those times when you need to massage an array into another format, or want to do something more than simply comma separating the values (the default behavior).

Getting Started

No special tools required. You can hack along in either your web browser’s console or using the Node.js REPL. The commands utilized are baked into the Array Object’s prototype.

To string, or Not to String.

If you were to run the following in your browser:

alert([1, 2, 3]);

You would receive an alert with the message 1,2,3 without any additional work on your part. If all you need to do is display the contents of an array in this format, this can get you pretty far. This even works when referencing array objects inside of template literals.

Under the hood, the array items are being joined together as a string, using the comma , character as the delimiter. It’s the same as running either of the following:

[1, 2, 3].toString();
[1, 2, 3].join();

Both result in the same 1,2,3 string.

In fact, that’s all that the .toString() method can do for us. It accepts no parameters so it’s usefulness is fairly limited.

Even though arrays are actually objects in JavaScript, the .toString() method for an array overrides the object’s .toString() method, that’s why we don’t end up with the pesky and way less useful [object Object] string.

Join Together

While it’s default behavior (without any passed parameters) is the same as .toString(), the .join() method is significantly more robust.

Let’s say you wanted to include a space after the comma when creating your string, you can tell .join() the exact string to use:

[1, 2, 3].join(', ');

Prefer to have each array item on it’s own line? Pass in a new line character:

[1, 2, 3].join('\n');

Working with HTML and want to use those breaks instead?

[1, 2, 3].join('<br>');

Want HTML breaks AND new lines?.. Okay, you get the idea.

The .join() method accepts an optional parameter that lets you define the separator character or characters you’d like to use to join the array items together.

Speaking of HTML

One of my favorite .join() tricks, before template literals and JSX made it extremely easy to work with multiple line blocks of markup, was to use .join() to assemble an array of HTML tags into a string:

[
  '<table>',
    '<thead>',
      '<tr>',
        '<th>Name</th>',
        '<th>Level</th>',
      '</tr>',
    '</thead>',
    '<tbody>',
      '<tr>',
        '<td>Alligator</td>',
        '<td>9001</td>',
      '</tr>',
    '</tbody>',
  '</table>',
].join('');

Passing in an empty string to .join() simply joins the array items without any additional characters.

Still pretty handy for dealing with multiple line strings and/or markup when you don’t have access to some of the more modern syntax options.

Conclusion

Even if all you’re trying to do is display a comma separated list of array items to a user, you can still benefit from using the .join() method. It gives you more control over the output which will make things easier to read for your users.

Working with a back-end server that doesn’t understand arrays being passed-in? Join your array items into a single value and you’re good to go!