Converting JavaScript Arrays to Strings

The join method converts the elements of an array to strings, concatenates them, and returns the resulting string. If you don't pass an argument to the join method, a comma will be placed between the values in the resulting string, as shown here:

var ar = ['Rudi', 'Morie', 'Halo', 'Miki'];
var str = ar.join(); // Rudi,Morie,Halo,Miki

You can supply a separator as an argument to the join method. In the example below, we pass a comma and space as separator:

var ar = ['Rudi', 'Morie', 'Halo', 'Miki'];
console.log( ar.join(', ') ); // Rudi, Morie, Halo, Miki

You can include an empty string separator if you do not want any separation between the array element values in the resulting string. The following demonstrates this, along with a few other separator choices:

var ar = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; 
console.log( ar.join('') ); // abcdefg
console.log( ar.join(' : ') ); // a : b : c : d : e : f : g
console.log( ar.join('-') ); // a-b-c-d-e-f-g
console.log( ar.join('|') ); // a|b|c|d|e|f|g

Invoking the join method on an array does not modify the array. It returns a string consisting of the array values concatenated.

Converting Other Data Types to Strings

In the examples above, the arrays contained only string values, but arrays can contain a variety of data types. How those types are converted to strings varies with data type.[1] The following example demonstrates applying the join method to an array containing a variety of primitive data types:

var ar2 = ['Hi', 7, 0, true, false, null, undefined, 3.14];
console.log( ar2.join(', ') ); // Hi, 7, 0, true, false, , , 3.14

Notice in the result that the string, numbers, and booleans display as expected while null and undefined are converted to empty strings.

Convert an Array with Sub-Arrays to a String

Next let's apply the join method to an array whose elements are themselves arrays:

var ar3 = [
    ['apple', 'orange', 'pear'],
    ['carrots', 'beans', 'peas'],
    ['cookies', 'cake', 'muffins', 'pie']
];

console.log( ar3.join(', ') ); 
// apple,orange,pear, carrots,beans,peas, cookies,cake,muffins,pie

Notice that even though we passed a comma and space separator to the join method, the elements of the sub-arrays are separated only with a comma. This occurs because the join method only applies to the outer array; it is not recursive. The sub-arrays are handled by the array object's toString method[2] which produces the same result as the join method with the default separator.

While we could use a for loop to apply the join method to sub-arrays, we can more conveniently use the flat method provided by a recent update to the JavaScript language. We can then apply the join method to its result:

let foods = [
    ['apple', 'orange', 'pear'],
    ['carrots', 'beans', 'peas'],
    ['cookies', 'cake', 'muffins', 'pie']
];

// flatten array, then join
console.log( foods.flat().join(', ') );
// apple, orange, pear, carrots, beans, peas, cookies, cake, muffins, pie

Represent an Array of Objects as a String

If your array consists of object literals, the reduce method can be used to generate a string reflecting their values.

Back to top