Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a string by joining the elements of an array in JavaScript?
In this tutorial, we will see how to create a string by joining the elements of an array in JavaScript. We will explore two different approaches: using the addition operator (+) to manually concatenate elements, and using the built-in join() method, which is the recommended approach.
Using the Addition Operator (+)
In this approach, we manually loop through the array and concatenate each element with a separator using the addition operator. While this works, it's more verbose than using the built-in join() method.
Algorithm
STEP 1 ? Create an array with elements and display it.
STEP 2 ? Initialize a result variable with the first array element.
STEP 3 ? Define a separator (space, comma, or any string).
STEP 4 ? Loop through remaining elements starting from index 1, adding separator + element to the result.
STEP 5 ? Display the final joined string.
Example
<html>
<body>
<p>Array: ["Tutorials", "Point", "Simply", "Easy", "Learning"]</p>
<input type="text" placeholder="Separator" id="separate" />
<input type="button" value="Join" onclick="joinTheArr()" />
<p id="writeHere">After joining array: </p>
<script>
function joinTheArr() {
var arr = ["Tutorials", "Point", "Simply", "Easy", "Learning"];
var separate = document.getElementById("separate").value;
if (!separate) separate = " ";
var result = arr[0];
for (var i = 1; i < arr.length; i++) {
result += separate + arr[i];
}
document.getElementById('writeHere').innerHTML = "After joining array: " + result;
}
</script>
</body>
</html>
Using the join() Method (Recommended)
The join() method is the standard way to convert array elements into a string. It accepts a separator parameter and returns a new string without modifying the original array.
Syntax
array.join(separator)
Parameters: separator (optional) - String to separate each element. Default is comma.
Example
<html>
<body>
<p>Array: ["first", "second", "third", "fourth", "fifth"]</p>
<input type="text" placeholder="Separator" id="separate" />
<input type="button" value="Join" onclick="joinTheArr()" />
<p id="writeHere">After joining array: </p>
<script>
function joinTheArr() {
var arr = ["first", "second", "third", "fourth", "fifth"];
var separate = document.getElementById("separate").value;
if (!separate) separate = " ";
var result = arr.join(separate);
document.getElementById('writeHere').innerHTML = "After joining array: " + result;
}
</script>
</body>
</html>
Common Examples
<script>
var fruits = ["apple", "banana", "orange"];
console.log(fruits.join()); // "apple,banana,orange" (default comma)
console.log(fruits.join(" ")); // "apple banana orange"
console.log(fruits.join(" - ")); // "apple - banana - orange"
console.log(fruits.join("")); // "applebananaorange" (no separator)
</script>
apple,banana,orange apple banana orange apple - banana - orange applebananaorange
Comparison
| Method | Code Length | Performance | Readability |
|---|---|---|---|
| Addition Operator (+) | Longer | Slower for large arrays | More complex |
| join() Method | Shorter | Optimized | Clean and clear |
Conclusion
The join() method is the recommended way to create strings from array elements. It's more readable, performs better, and requires less code than manual concatenation with the addition operator.
620 Views
