Difference between join() and toString() Methods in JavaScript

JavaScript join() Vs toString() Methods: Here, we are going to learn what are the differences between join() and toString() methods?
Submitted by IncludeHelp, on March 02, 2019

1) JavaScript toString() method

toString() method is not only for the arrays, but it can be used other types of objects also, it is used to convert an object’s value to the string. The values are separated by the commas.

Syntax:

    object.toString();

2) JavaScript join() method

join() method is an array method and it can be used with the arrays. It is used to join the array elements and returns a string. The values are separated by the commas (by default), using join() method we can also specify the separator.

Syntax:

    array.join([separator]);

Here, separator is an optional parameter, which defines the separator between the array elements in the string.

Examples:

    Input:
    var arr = ["Manju", "Amit", "Abhi", "Radib"];

    Function call       Output
    arr.toString()      "Manju,Amit,Abhi,Radib"
    arr.join()          "Manju,Amit,Abhi,Radib"
    arr.join(" ")       "Manju Amit Abhi Radib"

JavaScript code to demonstrate example of toString() and join() methods

<html>
<head>
<title>JavaScipt Example</title>
</head>

<body>
	<script>
		var arr1 = ["Manju", "Amit", "Abhi", "Radib"];
		var arr2 = [10, 20, 30, 40, 50];
		
		var str1 = arr1.toString();
		var str2 = arr2.toString();
		
		document.write("<br>using toString()...<br>");
		document.write("str1: " + str1 + "<br>");
		document.write("str2: " + str2 + "<br>");

		var str3 = arr1.join();
		var str4 = arr2.join();

		document.write("<br>using join()...<br>");
		document.write("str3: " + str3 + "<br>");
		document.write("str4: " + str4 + "<br>");

		var str5 = arr1.join(" ");
		var str6 = arr2.join(" ");

		document.write("<br>using join() with separator...<br>");
		document.write("str5: " + str5 + "<br>");
		document.write("str6: " + str6 + "<br>");		
		
		document.write("<br>printing the types of the objects...<br>");
		document.write("type of arr1: " + typeof(arr1) + "<br>");
		document.write("type of arr2: " + typeof(arr2) + "<br>");
		document.write("type of str1: " + typeof(str1) + "<br>");
		document.write("type of str2: " + typeof(str2) + "<br>");
		document.write("type of str3: " + typeof(str3) + "<br>");
		document.write("type of str4: " + typeof(str4) + "<br>");
		document.write("type of str5: " + typeof(str5) + "<br>");
		document.write("type of str6: " + typeof(str6) + "<br>");
	</script>
</body>
</html>

Output

using toString()...
str1: Manju,Amit,Abhi,Radib
str2: 10,20,30,40,50

using join()...
str3: Manju,Amit,Abhi,Radib
str4: 10,20,30,40,50

using join() with separator...
str5: Manju Amit Abhi Radib
str6: 10 20 30 40 50

printing the types of the objects...
type of arr1: object
type of arr2: object
type of str1: string
type of str2: string
type of str3: string
type of str4: string
type of str5: string
type of str6: string

JavaScript Array Object Methods »

JavaScript Array toString() Method

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples