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 Array of Arrays to 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.

You could use a for loop to apply the join method to sub-arrays. The following demonstrates a function defined for that purpose:

function joinSubArrays(ar, sep) {
    var str = ''; 
    sep = sep || ', '; // default separator
    for (var i = 0, len = ar.length; i < len; i++) {
        str += ar[i].join(sep); // apply join to current sub-array
        str += sep; // add separator between sub-arrays
    }
    return str.slice(0, -sep.length); // remove last separator and return str
}

// pass array from example above to joinSubArrays
console.log( joinSubArrays(ar3) ); 
// apple, orange, pear, carrots, beans, peas, cookies, cake, muffins, pie

The reduce method could also be used to accomplish this.

Convert Array of Objects to String

Now let's see what happens when we apply join to an array of objects:

var arObj = [
    { 'name': 'Jon',  'age': 24 },
    { 'name': 'Mark', 'age': 32 },
    { 'name': 'Kacy', 'age': 22 }
];

console.log( arObj.join(', ') );
// [object Object], [object Object], [object Object]

The Object.prototype.toString method is responsible for converting object literals to strings. We can iterate through the array of objects to generate a more helpful string representation, as we demonstrate below:

function joinArrayObjs(ar) {
    var str = '';
    for (var i = 0, len = ar.length; i < len; i++) {
        str += ar[i].name + ' is ' + ar[i].age + '. ';
    }
    return str;
}

console.log( joinArrayObjs(arObj) );
// Jon is 24. Mark is 32. Kacy is 22.

The reduce method can also be used to accomplish this.

Back to top