JavaScript: Array to String

JavaScript is a programming language…but I’m pretty sure you knew that 😄. What you may also know is that, like many programming languages, there is more than one way to do the same thing. Today we are going to go over several ways that you can take an array and turn it into a string using a variety of array methods, arrow functions, and other language features.

TLDR

The easiest and quickest way is to use the Array.toString() method. This method does not take any arguments and returns the array as a string, with each element separated by a comma. Like so:

const letters = ['this', 'post', 'is', 'awesome'];
const letterString = letters.toString();
console.log(letterString);

Output

this,post,is,awesome

Now it may have created a sentence with a bunch of comma splices but for a quick way to debug some code this method will do the trick.

Using Join

If you are looking for a little more formatting over the output the Array.join() method may be what you are looking for. This method takes one argument, which is the separator that is used between the elements of the array. For example, the following code takes an array of strings and turns them into one string, with each word separated by a space:

const numbers = ['this', 'output', 'has', 'no', 'comma', 'splices'];
const numberString = numbers.join(' ');
console.log(numberString);

Output

this output has no comma splices

What about structured data

The above methods are nice for quick debugging or a simple array, but what do you do if your array is full of more structured data. Well you are in luck, the following methods will give you some tips and tricks to work with that to create a string to suites your use case.

For the following examples we will be using this dataset. It is a subset of a machine learning dataset that we have used in previous Java Script tutorials like this one csv to array

price	area	bedrooms	bathrooms	stories	mainroad	guestroom	basement	hotwaterheating	airconditioning
13300000	7420	4	2	3	yes	no	no	no	yes
12250000	8960	4	4	4	yes	no	no	no	yes
12250000	9960	3	2	2	yes	no	yes	no	no
12215000	7500	4	2	2	yes	no	yes	no	yes
11410000	7420	4	1	2	yes	yes	yes	no	yes

const data = [{"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"},
    {"price":"12250000","area":"8960","bedrooms":"4","bathrooms":"4","stories":"4","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"},
    {"price":"12250000","area":"9960","bedrooms":"3","bathrooms":"2","stories":"2","mainroad":"yes","guestroom":"no","basement":"yes","hotwaterheating":"no","airconditioning":"no"},
    {"price":"12215000","area":"7500","bedrooms":"4","bathrooms":"2","stories":"2","mainroad":"yes","guestroom":"no","basement":"yes","hotwaterheating":"no","airconditioning":"yes"},
    {"price":"11410000","area":"7420","bedrooms":"4","bathrooms":"1","stories":"2","mainroad":"yes","guestroom":"yes","basement":"yes","hotwaterheating":"no","airconditioning":"yes"}];

Using Map

Let’s kick this dive into JS up a notch with the Map method. This method can be useful when you have some structured data like the housing above.

const data = [{"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"},
    {"price":"12250000","area":"8960","bedrooms":"4","bathrooms":"4","stories":"4","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"},
    {"price":"12250000","area":"9960","bedrooms":"3","bathrooms":"2","stories":"2","mainroad":"yes","guestroom":"no","basement":"yes","hotwaterheating":"no","airconditioning":"no"},
    {"price":"12215000","area":"7500","bedrooms":"4","bathrooms":"2","stories":"2","mainroad":"yes","guestroom":"no","basement":"yes","hotwaterheating":"no","airconditioning":"yes"},
    {"price":"11410000","area":"7420","bedrooms":"4","bathrooms":"1","stories":"2","mainroad":"yes","guestroom":"yes","basement":"yes","hotwaterheating":"no","airconditioning":"yes"}];
const result = data.map((house) => `${house.price} | ${house.area} | ${house.bedrooms} | ${house.bathrooms} | ${house.stories} | `).join('\n');
console.log(result);

Output

13300000 | 7420 | 4 | 2 | 3 |
12250000 | 8960 | 4 | 4 | 4 |
12250000 | 9960 | 3 | 2 | 2 |
12215000 | 7500 | 4 | 2 | 2 |
11410000 | 7420 | 4 | 1 | 2 |

As you can see in the above example we are able to ake the array of housing objects and print it out in a format that we like

Other useful things

You may wan to filter some entries before printing them out. If that is the case take a look at the Array.filter method. Here we use an arrow function to specify the filter conditions and the result is then returned.

const data = [{"price":"13300000","area":"7420","bedrooms":"4","bathrooms":"2","stories":"3","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"},
    {"price":"12250000","area":"8960","bedrooms":"4","bathrooms":"4","stories":"4","mainroad":"yes","guestroom":"no","basement":"no","hotwaterheating":"no","airconditioning":"yes"},
    {"price":"12250000","area":"9960","bedrooms":"3","bathrooms":"2","stories":"2","mainroad":"yes","guestroom":"no","basement":"yes","hotwaterheating":"no","airconditioning":"no"},
    {"price":"12215000","area":"7500","bedrooms":"4","bathrooms":"2","stories":"2","mainroad":"yes","guestroom":"no","basement":"yes","hotwaterheating":"no","airconditioning":"yes"},
    {"price":"11410000","area":"7420","bedrooms":"4","bathrooms":"1","stories":"2","mainroad":"yes","guestroom":"yes","basement":"yes","hotwaterheating":"no","airconditioning":"yes"}];
const threeBedrooms = data.filter((n) => parseInt(n.bedrooms) === 3);
const result = threeBedrooms.map((house) => `${house.price} | ${house.area} | ${house.bedrooms} | ${house.bathrooms} | ${house.stories} | `).join('\n');
console.log(result);

Output

12250000 | 9960 | 3 | 2 | 2 |

Be weary of type coercion when ever you are dealing with equality operators. If you don’t know the difference between == and === than you should look into this as it can really mess you up in odd ways if you don’t know what’s happening.

So that is it, we’ve covered several ways to turn an array into a string in JavaScript, including using Array.join(), Array.toString(), Array.map() and filter() method. Hopefully know you have the tools you need to write some sweet JS 🍰

Fun Surprise

Congrats for making it all the way to the end! As a fun surprise you should inspect your js console (usually right click->inspect then find the console). You will see the above examples running in your browser 😎