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
Implode an array with jQuery/JavaScript
In JavaScript and jQuery, "imploding" an array means joining its elements into a single string. This is commonly needed when displaying lists, generating SQL queries, or creating comma-separated values.
We'll explore 4 different approaches to join array elements into strings.
Using the Array.join() Method (Recommended)
The join() method is the most efficient way to implode an array. It joins all elements into a string with a specified delimiter.
Syntax
array.join(delimiter)
The delimiter parameter is optional. If omitted, elements are separated by commas.
Example: Basic Join
<html>
<body>
<h3>Using the <i>array.join()</i> method to implode arrays</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
// Array of fruit names
let arr = ["Banana", "Orange", "Apple", "Mango"];
// Join with default comma separator
let fruits = arr.join();
output.innerHTML = "Original array: " + arr + "<br><br>";
output.innerHTML += "Joined array: " + fruits;
</script>
</body>
</html>
Example: Custom Delimiter
<html>
<body>
<h3>Using custom delimiter with <i>array.join()</i></h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let colors = ["Red", "Green", "White", "Black"];
// Join with custom delimiter
let colorStr = colors.join(' | ');
output.innerHTML = "Original array: " + colors + "<br><br>";
output.innerHTML += "Joined array: " + colorStr;
</script>
</body>
</html>
Using For Loop with String Concatenation
For more control over the joining process, you can manually iterate through the array and build the result string.
Syntax
for (let i = 0; i < array.length; i++) {
result += array[i];
}
Example
<html>
<body>
<h3>Using <i>for loop and + operator</i> to implode arrays</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let numbers = [10, 20, 30, 40, 50];
let numberStr = "";
// Using for loop with custom delimiter
for (let i = 0; i < numbers.length; i++) {
numberStr += numbers[i];
if (i < numbers.length - 1) {
numberStr += " < ";
}
}
output.innerHTML = "Original array: " + numbers + "<br><br>";
output.innerHTML += "Joined array: " + numberStr;
</script>
</body>
</html>
Using Array.reduce() Method
The reduce() method provides a functional approach to implode arrays by accumulating elements into a single string.
Syntax
array.reduce((accumulator, currentValue) => accumulator + delimiter + currentValue)
Example
<html>
<body>
<h3>Using <i>array.reduce() method</i> to implode arrays</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let message = ["Hello", "Programmer", "Welcome", "to", "JavaScript"];
// Using reduce() method
let messageStr = message.reduce((a, b) => a + " " + b);
output.innerHTML = "Original array: " + message + "<br><br>";
output.innerHTML += "Joined array: " + messageStr;
</script>
</body>
</html>
Using jQuery's each() Method
jQuery's each() method allows you to iterate through arrays and build the result string with custom logic.
Syntax
$.each(array, function(index, value) {
result += value + delimiter;
});
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h3>Using jQuery's <i>each() method</i> to implode arrays</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let trees = ["Oak", "Pine", "Maple", "Birch"];
let treeStr = "";
// Using jQuery each() method
$.each(trees, function(index, value) {
treeStr += value;
if (index < trees.length - 1) {
treeStr += " - ";
}
});
output.innerHTML = "Original array: " + trees + "<br><br>";
output.innerHTML += "Joined array: " + treeStr;
</script>
</body>
</html>
Comparison
| Method | Performance | Flexibility | Readability |
|---|---|---|---|
Array.join() |
Fastest | Basic | Excellent |
| For Loop | Good | High | Good |
Array.reduce() |
Good | High | Good |
jQuery each()
|
Slower | High | Good |
Conclusion
Use Array.join() for simple string concatenation as it's the fastest and most readable. For complex logic or custom formatting, consider using for loops or reduce() method.
1K+ Views
