Array method toString() in JavaScript

Array is a special data structure which has a great toolkit for easy and fast processing of its elements. However, sometimes there is a need to convert a whole array into a string. For example, when you work with a server that does not accept arrays as arguments.

JavaScript offers an option for such cases - the toString() method. This function does not require any parameters. All you need in order to use it is your array of elements. Keep in mind that the array itself will not be changed but a new string will be created.

The items will be separated by commas and square brackets will be omitted. If you try to transform an array with no elements, you'll get an empty string accordingly. The example below illustrates how easy it is to use this method.

my_array = ['1', '2', '3'];
my_string = my_array.toString();
console.log(my_string); // "1,2,3"

A good thing about this function is that it can convert arrays of almost any data type. It can be a set of strings, numbers or even both. Moreover, toString() can deal with nested arrays as well (that is the arrays located inside the other one). From the code below you can see that this function has no problem converting different types of values at the same time.

my_array = [1, "word", 3, [0, -0.3], "word"];
my_string = my_array.toString();
console.log(my_string); // "1,word,3,0,-0.3,word"

In general, every object in JavaScript has this toString() method because it belongs to the Object class. It's automatically called every time when a string value is expected somewhere in the program. For example, if you execute command console.log([-1, 0, 1]), you will get a string representation of this array in your console without any exception messages. That is because your program calls the toString() method by default.

Ways to convert array into string

As said earlier the toString() method does not accept any parameters, so basically it offers one and only way of representing elements. That's why some users may find it inconvenient. Luckily, there is another method appropriate for such situations. That is join().

This function can convert an array into a string as well. However, it has an optional argument - a separator. That is the symbol which you want to see between every element of your array when they are written in a string together. If you don't pass any value, the method will use commas by default. You can take an empty string for a role of the separator and your elements will be printed in one word.

my_array = new Array('w', 'o', 'r', 'd');
my_string = my_array.join('');
console.log(my_string); // "word"

Another simple way for transforming arrays into strings is using concatenation. JavaScript knows how to stick two strings together using a plus operator. We can benefit from it by adding an empty string to an array of elements.

my_array = new Array("w", 1, ["word"], 10);
my_string = my_array + "";
console.log(my_string); // "w,1,word,10"

If you don't want to use a plus operator, concatenation is also possible by means of a special function - concat(). The operation principle is the same. You take an empty string and concatenate it with an array of elements.

my_array = new Array("w", 1, ["word"], 10);
my_string = "";
console.log(my_string.concat(my_array)); // "w,1,word,10"

Finally, if any of these options does not suit you well, you can make your own function for converting arrays. You will need to create an empty string and then in a forEach loop assign every element of your array to this string. You can improve your function by adding a special character between every element, so a separator could be something different than a comma.

Converting an array of objects

You should be careful with converting an array of objects using the built-in toSting() method. It will not be able to recognize and transform such elements appropriately and will return "[object Object]" instead of the actual values.

my_array = [
    {name: "first"},
    {name: "second"}
];
my_string = my_array.toString();
console.log(my_string); // "[object Object],[object Object]"

Of course, you could override this function to make it represent your objects properly. However, it might become inefficient when you decide to add, remove or rename some object properties as you'll need to modify the toString() method each time as well.

For situations like this JavaScript offers another good solution - the stringify() method from the JSON (JavaScript Object Notation) class. Initially, the JSON format was created for JavaScript but now many other languages also have some libraries that allow working with it. It makes JSON very convenient for data exchange purposes.

In the following example there is an array of two elements and each of them has two properties. The regular toString() method could not deal with this case but in the below example you can see how easy it is to convert an array of objects into a string using the stringify() function.

dogs = [
    {name: "Max", colour: "black"},
    {name: "Archie", colour: "brown"}
];
my_string = JSON.stringify(dogs);
console.log(my_string); 
// "[{"name":"Max","colour":"black"},{"name":"Archie","colour":"brown"}]"

This method contains special features that you need to pay attention to. Note that it does not remove the brackets and there are no singular quotation marks. Every word is surrounded by double marks, even the names of the object properties.

To sum up, there are several ways to convert arrays into strings in JavaScript. The easiest of them are using the built-in toString() and join() methods or concatenation. For some more complicated cases, stringify() from the JSON class is indispensable.