Benchmark: Reduce vs map/join

Script Preparation code:

var strings = [];
for (var i=0; i<1000; i++) {
  strings[i] = ""+i+i;
}

Tests:

for
var result = ""; for (var i=0; i<strings.length; i++) { result = result+' x-'+strings[i]; }
reduce
var result = strings.reduce(function(string, i) { return string+' x-'+i; }, ""); result=result.substring(1);
map
var result = strings.map(function(i) { return 'x-'+i; }).join(' ');
for of
var result = ""; for (var i of strings) { result += ' x-'+i; }

Historical Performance Data aggregated from 127 community runs

Desktop Results:

Chrome 89 runs

reduce

127K/s

for of

98K/s

map

43K/s

for

12K/s

Fastest: reduce (10.5x faster)

View exact numbers

✓ reduce: 127,371 ops/sec
• for of: 97,657 ops/sec
• map: 42,782 ops/sec
• for: 12,100 ops/sec

Firefox 30 runs

for

110K/s

reduce

91K/s

for of

82K/s

map

49K/s

Fastest: for (2.2x faster)

View exact numbers

✓ for: 109,569 ops/sec
• reduce: 91,149 ops/sec
• for of: 81,583 ops/sec
• map: 48,971 ops/sec

Mobile Results:

Chrome 8 runs

reduce

75K/s

for of

50K/s

for

37K/s

map

23K/s

Fastest: reduce (3.2x faster)

View exact numbers

✓ reduce: 74,596 ops/sec
• for of: 50,228 ops/sec
• for: 37,127 ops/sec
• map: 23,028 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
reduce
map
for of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Android 16; Mobile; rv:153.0) Gecko/153.0 Firefox/153.0

Browser/OS: Firefox Mobile 153 on Android

View result in a separate tab

for

68K/s

reduce

33K/s

for of

32K/s

map

18K/s

View exact numbers

Test name	Executions per second
✓ for	67,824 Ops/sec
reduce	33,234 Ops/sec
for of	32,418 Ops/sec
map	18,099 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares different ways to achieve the same result in JavaScript: concatenating strings from an array.

**The Goal:**  Imagine you have an array of numbers (in this case, `strings`), and you want to create a new string by adding "x-" before each number in the array and joining them together.

**The Options:**

* **`for` loop:** The classic approach. It iterates through each element in the array, appending "x-" followed by the current element to a `result` string.
* **`reduce` method:** This higher-order function elegantly combines elements of an array into a single value. In this case, it takes a callback function that adds "x-" and the current element to the `string`, accumulating the result. The `.substring(1)` is used to remove the leading 'x-' added in the initial state.
* **`map` and `join`:**  The `map` method transforms each element in the array, adding "x-" before each number. Then, `join(' ')` combines these transformed strings into a single string with spaces between them. 
* **`for...of` loop:** A modern alternative to the traditional `for` loop, offering a more concise way to iterate over iterable objects like arrays.

**Pros & Cons:**

| Method | Pros                                    | Cons                             |
|--------|-----------------------------------------|-----------------------------------|
| `for`   | Simple and easy to understand          | Can be verbose for larger arrays    |
| `reduce` | Concise, efficient for single-value reduction | Might require more mental effort to grasp initially  |
| `map/join` | Readable, good for transforming elements| Slightly less performant than `reduce` in this specific case |
| `for...of` | Modern syntax, clean and readable       | Can be slower than traditional loops in some scenarios |

**Other Considerations:**

* **Readability:** Each method has a different level of readability. Choose the one that is most understandable for your team.

* **Performance:** The results on MeasureThat.net show that `reduce` performs best in this specific case. However, performance can vary depending on the size and complexity of your data.
* **Use Case:** Consider whether you need to transform elements in an array (map) or simply accumulate a single value (reduce).

**Alternatives:**

While these methods work well for string concatenation,  libraries like Lodash offer utility functions that might provide even more concise and efficient solutions depending on your specific needs.

Reduce vs map/join (version: 0) Benchmark.js

Comparing performance of: `for vs reduce vs map vs for of`

Created: 8 years ago by: Guest

Go to the latest result

for

reduce

map

for of

Historical Performance Data aggregated from 127 community runs

Desktop Results:

Chrome 89 runs

Firefox 30 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

Reduce vs map/join (version: 0) Benchmark.js

Comparing performance of: for vs reduce vs map vs for of

Created: 8 years ago by: Guest

Go to the latest result

for

reduce

map

for of

Historical Performance Data aggregated from 127 community runs

Desktop Results:

Chrome 89 runs

Firefox 30 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

Related benchmarks

Comparing performance of: `for vs reduce vs map vs for of`