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
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. 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
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 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
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.
toStringmethod available for converting their values to strings. It may be the
toStringmethod inherited from the generic Object, or it may be specific to the particular type of object. For example, array objects, date objects, regular expression objects, and function objects each have their own