In programming, the toString() method is used to represent data types in a simpler text format. The Array object overrides the default toString() method of the Object element. It joins the array and returns a text string with all the current array items, separated by commas.

The default behaviour of JavaScript

The JavaScript language calls this method whenever you try to represent an array into string format. For an example, if you try to render array into string interpolation, JS will call this method to convert Array into string format. Here is a working example:

const array = ['a', 'b'];
console.log(`test ${array}`);

The output of this code will look like this:

'test a,b'

The manual way to use toString()

You can also call toString() method on an empty array object. This can be useful when you are using the array into string format. Here is an example of the manual method:

const array = ['a', 'b'];
console.log(array.toString());

The output of this code will look like this:

'a,b'

Edge Cases

At this point, you might be thinking on how this method will work in some edge cases. Let’s take a look at them one by one.

An Empty Array

You might be wondering, what output you will get when you call this method on an empty array. Will it be an empty string or will it be , as there are no elements?

The toString() method uses the comma , to join elements in the string format. So, if you do not have any elements in the array, there is nothing to join! Because of this reason, we get an empty string. Here is a working example:

const array1 = [];
console.log(array1.toString());

const array2 = new Array();
console.log(array2.toString());

The output of this code will look like this:

''
''

An array with elements of different data types

When JavaScript calls toString() method on an array, it also calls this method on its elements. The toString() method on array, gather these values and joins them with , to create the string output.

const arr = ['a', 2, true];
console.log(arr.toString());

The output of this code is:

'a,2,true'

Here is a step by step explanation on how the final output a,2,true is generated:

1. JavaScript calls toString() method on arr array.
2. JavaScript will now loop through all of it’s elements to generate final output
   1. In the first iteration it finds string element ’a’ . As this element is already a String, JavaScript does not need to call toString() on it.
   2. In the second iteration, it finds the number element 2. To convert this element into String, JavaScript calls toString() method on 2 , which returns ’2’ .
   3. JavaScript joins the output from Iteration 1 and Iteration 2 with ,.
   4. JavaScript continues doing these steps for rest of the elements in the array.
3. At this point, JavaScript will return the final string output.

An array with undefined or null

So, what will happen if one of the element is undefined or null ? undefined or null means that it does not have any value! So, the string representation of nothing will be just an empty string!

const arr = ['a', 2, true, undefined, null];
console.log(arr.toString());

The output of this code is:

'a,2,true,,'

An array with nested array

Sometimes, you will be working with a nested array in your codebase. Same as any other elements in the array, JavaScript will call toString() method to get string output for each elements, including nested array.

In this example, we have a nested array: ['nested', 'array'] . When JavaScript calls toString() method, it will return 'nested,array' . JavaScript will now put this string in place of this nested array.

const arr = ['a', 2, true, ['nested', 'array'], 'end'];
console.log(arr.toString());

The output:

'a,2,true,nested,array,end'

Warning: Please note that, JavaScript does not add any visual representation to differentiate the nested array’s toString() output from the parent array's toString() output!

An array with object

It is very common to work with an array of objects in JavaScript. As we have seen so far, the JavaScript will also call the toString() method on the nested Object. The default string interpretation of an object is: [object Object] . Because of this default behaviour, you will see [object Object] instead of the values of the object. Here is an example with nested objects:

const arr = ['a', 2, true, {type: 'nested object', isInteresting: true}, {}, 'end'];
console.log(arr.toString());

The output of this code will look like:

'a,2,true,[object Object],[object Object],end'

Outro

So this was my complete guide on Array's toString() method. If I have missed something, please let me know in the comment section. Your reviews help me to improve as a blogger!