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
Join arrays to form string in JavaScript
JavaScript provides built-in methods to join array elements into strings. The join() method converts a single array to string, while concat() combined with join() handles multiple arrays.
Input-Output Scenarios
Converting a single array to string:
Input = [32, 45, 65, 12, 07, 55]; Output = "32,45,65,12,7,55" // String
Joining multiple arrays into a single string:
Array1 = [123, 453, 656, 654, 125, 757]; Array2 = ["Hello", "honey", "bunny"]; Output = "123,453,656,654,125,757,Hello,honey,bunny" // String
Using Array.join() Method
The join() method converts all array elements into a string, separated by a specified delimiter. By default, it uses comma as separator.
Syntax
array.join(separator)
Example: Single Array Conversion
<!DOCTYPE html>
<html>
<head>
<title>Joining single array to form string in JavaScript</title>
</head>
<body>
<p id="para1"></p>
<p id="para2"></p>
<p id="para3"></p>
<script>
const snacks = ["Pizza", "Waffle", "Donut"];
let string1 = snacks.join();
document.getElementById("para1").innerHTML = string1;
let string2 = snacks.join(' | ');
document.getElementById("para2").innerHTML = string2;
let string3 = snacks.join('');
document.getElementById("para3").innerHTML = string3;
</script>
</body>
</html>
Pizza,Waffle,Donut Pizza | Waffle | Donut PizzaWaffleDonut
Using concat() Method for Multiple Arrays
The concat() method combines two or more arrays and returns a new array. It doesn't modify the original arrays.
Syntax
array1.concat(array2, array3, ...arrayN)
Example: Combining Multiple Arrays
<!DOCTYPE html>
<html>
<head>
<title>Joining arrays to form string in JavaScript</title>
</head>
<body>
<p id="para1"></p>
<p id="para2"></p>
<script>
const breakfast = ["Dosa", "Idly", "Poha", "Upma"];
const snacks = ["Pancakes", "Waffle", "Donut"];
const drinks = ["Thumbsup", "Sprite"];
const combinedArray = breakfast.concat(snacks, drinks);
document.getElementById("para1").innerHTML = combinedArray;
let string = combinedArray.join(" + ");
document.getElementById("para2").innerHTML = string;
</script>
</body>
</html>
Dosa,Idly,Poha,Upma,Pancakes,Waffle,Donut,Thumbsup,Sprite Dosa + Idly + Poha + Upma + Pancakes + Waffle + Donut + Thumbsup + Sprite
Example: Mixed Data Types
Arrays containing different data types (numbers and strings) can be joined seamlessly:
<!DOCTYPE html>
<html>
<head>
<title>Joining arrays to form string in JavaScript</title>
</head>
<body>
<p id="para1"></p>
<p id="para2"></p>
<script>
const numbers = [45, 99, 83, 54];
const snacks = ["Pancakes", "Waffle", "Donut"];
const mixedArray = numbers.concat(snacks);
document.getElementById("para1").innerHTML = mixedArray;
let string = mixedArray.join(" - ");
document.getElementById("para2").innerHTML = string;
</script>
</body>
</html>
45,99,83,54,Pancakes,Waffle,Donut 45 - 99 - 83 - 54 - Pancakes - Waffle - Donut
Key Points
-
join()converts arrays to strings with customizable separators -
concat()combines multiple arrays without modifying originals - Chain
concat()andjoin()to merge and stringify multiple arrays - Works with mixed data types (numbers, strings, etc.)
Conclusion
Use join() for single arrays and combine concat() with join() for multiple arrays. These methods provide flexible control over separators and handle mixed data types effectively.
454 Views
