Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
array map and join methods
(version: 1)
Comparing performance of:
reduce vs map+join vs for loop vs foreach
Created:
one year ago
by:
Guest
Go to the latest result
Script Preparation code:
var array = []; let i = 0 for (i = 0; i < 100000; i++) { array.push(`${i}번째 수`); }
Tests:
reduce
const arrayString = array.reduce((acc, val) => acc+`<td>${val}</td>`, "");
map+join
const arrayString = array.map(val => `<td>${val}</td>`).join("");
for loop
var arrayString = ""; for (let val of array) arrayString += `<td>${val}</td>`;
foreach
var arrayString = ""; array.forEach(val => arrayString += `<td>${val}</td>`);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
reduce
map+join
for loop
foreach
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Browser/OS:
Chrome 136 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=608505" width="100%" height="500px"></iframe>
for loop
409/s
foreach
404/s
reduce
327/s
map+join
120/s
View exact numbers
Test name
Executions per second
✓
for loop
409 Ops/sec
foreach
404 Ops/sec
reduce
327 Ops/sec
map+join
120 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark defined tests the performance of different methods for generating HTML table rows from an array of strings in JavaScript. The objective is to compare several strategies for building a concatenated string that represents table cells populated with the values in the array. ### Benchmark Approaches 1. **Reduce Method**: - **Definition**: `const arrayString = array.reduce((acc, val) => acc + `<td>${val}</td>`, "");` - **Description**: This approach uses the `reduce` function to iterate over the elements of the array. Each element is concatenated to an accumulator string to form `<td>` elements. - **Pros**: Functional programming style; concise. - **Cons**: May be less performant than imperative loops due to the overhead of function calls and intermediate strings during concatenation. 2. **Map and Join Method**: - **Definition**: `const arrayString = array.map(val => `<td>${val}</td>`).join("");` - **Description**: This method first transforms each element into a `<td>` string using `map`, then concatenates the array of strings into a single string using `join`. - **Pros**: Clear separation of transformation and concatenation; good readability. - **Cons**: The intermediate array created by `map` can lead to higher memory usage and may be less efficient than other approaches for large datasets. 3. **For Loop Method**: - **Definition**: `var arrayString = ""; for (let val of array) arrayString += `<td>${val}</td>`;` - **Description**: This traditional for-of loop iteratively adds each `<td>` string to the result variable. - **Pros**: Generally offers the best performance due to straightforward iteration without the overhead of function calls. - **Cons**: Code may be less concise compared to functional approaches. 4. **ForEach Method**: - **Definition**: `var arrayString = ""; array.forEach(val => arrayString += `<td>${val}</td>`);` - **Description**: Similar to the for-of loop, this approach uses `forEach` to iterate over each element and concatenate the result. - **Pros**: Functional programming style with built-in iteration; can be more readable than a traditional loop. - **Cons**: Similar performance limitations to the reduce method due to repeated string concatenation. ### Benchmark Results The benchmark results show the number of executions per second for each method, indicating performance: - **For Loop**: 408.60 executions/sec (fastest) - **ForEach**: 403.88 executions/sec - **Reduce**: 327.31 executions/sec - **Map + Join**: 120.18 executions/sec (slowest) ### Considerations - The performance differences are significant, especially for large datasets. The for loop method is typically the fastest for string concatenation tasks. - Using techniques like `map` and `join` can enhance code readability but may come with trade-offs in performance due to the creation of intermediate arrays and additional function calls. ### Alternatives Other potential alternatives might include using `StringBuilder` techniques, available in certain languages but not natively in JavaScript, or leveraging template literals in a more structured approach (e.g., using frameworks like React, Vue, etc.), which may abstract these operations into more optimized rendering processes. Additionally, if HTML manipulation is necessary, libraries like jQuery can automate and optimize these tasks, though they come with their own overhead and complexities.
Related benchmarks
join vs map js
JS join vs map
Reduce vs map/join with existing strings on an object
string concatenation vs array acc
Comments
Confirm delete:
Do you really want to delete benchmark?