How to turn JavaScript array into the comma-separated list?

Javascript Web Development Front End Technology

In this tutorial, we will learn how we can change the elements of a JavaScript array in a comma-separated list. Sometimes, we need the elements of a JavaScript array in a format that is not returned by the array itself by default, so we need to write some extra code to implement this task. Fortunately, JavaScript allows us to do so by using some in-built methods. We will discuss these methods in detail.

Following are the in-built methods provided by JavaScript to convert the array into a comma-separated list −

Array join() method
Array toString method

Let us discuss both of these methods in detail with help of code examples −

Using the Array join() Method

The join() method joins all the elements of an array and forms a string and returns it later by separating every element with the specified separator passed to the method in form of a string.

Syntax

Following syntax shows how we can use the join() method to get a comma−separated list of all array elements −

array.join(separator);

Let us discuss the parameters and the return value of the join() method −

Parameters

separator − The join() method accepts a separator in the form of string. You can pass any separator of your choice to it like: dot, comma, and, or etc. If there is no any separator passed to this method, then by default it will separate all the elements with a comma(“,”) separator.

Return value

String − It will return a string containing all the array elements that are separated by the separator passed to the join() method.

Let us understand the practical implementation of join() method to turn the elements of a array in a comma-separated list −

Algorithm

Step 1 − As a first step of the algorithm, we will define a JavaScript array which we will turn into a comma-separated list later.
Step 2 − In the next step, we will define a JavaScript function that triggers clicking the button.
Step 3 − In the third step, we will use the join() method inside the function declared in the previous step and display the result on user screen when user clicks the button.

Example

The below example illustrates the use of the join() method to turn a JavaScript array in a comma−separated list −

<html>
<head>
   <title>JavaScript Array join Method</title>
</head>
<body>
   <script>
      var arr = new Array("Java","PHP","Ruby");
      var str = arr.join();
      document.write("str : " + str );

      var str = arr.join(", ");
      document.write("<br />str : " + str );
   </script>
</body>
</html>

Using the Array toString() Method

The toString() method simply converts all the elements of the array into a string and then return that string in the form of a comma-separated list which contains all the elements that contained by the original array. The toString() method does not accept any parameter as a separator to separate elements, it by default returns comma-separated list of all the elements of array.

Syntax

The following syntax will be used to turn a array in comma-separated list using the toString() method −

array.toString();

Let us discuss the practical implementation of the toString() method to turn the array in a comma-separated list −

Algorithm

The algorithm of this example and the previous example is almost same, there is a slight change in the algorithm where you just need to replace the join() method in previous algorithm with the toString() method without passing any parameter to it.

Example

The below example will turn the JavaScript array into a comma−separated list −

<html>
<body>
   <h2>Turn JavaScript array into the comma-separated list</h2>
   <p id="result">Original array : ["Tutorialspoint", "Content writting", "Online learning platform"]<br></p>
   <button onclick="turn()">Click to turn</button>
   <script>
      var myElement = document.getElementById("result");
      var arr = ["Tutorialspoint", "Content writting", "Online learning platform"];
      function turn() {
         var turnedArr = arr.toString();
         myElement.innerHTML += "<br>The comma-separated list of above array is: " + turnedArr;
      }
   </script>
</body>
</html>

As you can clearly see that, we used the same array and the function to implement this approach too. We have just replaced the join() method with toString() method. But there is no change in the result of both the approaches, In the end, we get a comma-separated list of all the elements of the array, which is the main motive of doing this all.

In this tutorial, we have seen two different ways, approaches or we can say the two different methods of JavaScript to achieve the same goal of turning the JavaScript array into a comma−separated list. We discussed both of these methods in detail by understanding the practical implementation using a code example associated with each of these methods. You can use any of these methods, whenever you need to turn a array into a comma-separated list.