
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to turn JavaScript array into the comma-separated list?
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.
- Related Articles
- Convert String into comma separated List in Java
- How to split comma and semicolon separated string into a two-dimensional array in JavaScript ?
- How to create comma separated list from an array in PHP?
- How to convert comma separated text in div into separate lines with JavaScript?
- How to convert array of comma separated strings to array of objects?
- How to turn a JSON object into a JavaScript array in JavaScript ?
- Display MySQL Results as comma separated list?
- How to convert a comma separated String into an ArrayList in Java?
- How do I turn a list into an array in Java?
- How to set a comma separated list as a table in MySQL?
- Python program to convert list of string to comma separated string
- How to turn words into whole numbers JavaScript?
- Java Program to Convert a List of String to Comma Separated String
- MySQL query to retrieve records from the part of a comma-separated list?
- How to create a comma separated string from a list of string in C#?
