Benchmark: Performance of JavaScript .forEach, .map and .reduce vs for and for..of

Script Preparation code:

function generateTestArray() {
  const result = [];
  for (let i = 0; i < 1000000; ++i) {
    result.push({
      a: i,
      b: i / 2,
      r: 0,
    });
  }
  return result;
}

Tests:

.forEach
const array = generateTestArray(); array.forEach((x) => { x.r = x.a + x.b; });
for..of
const array = generateTestArray(); for(const x of array) { x.r = x.a + x.b; }
for..of (destructuring)
const array = generateTestArray(); const r = []; for(const {a, b} of array) { r.push(a + b); }
.map
const array = generateTestArray(); array.map(x => x.a + x.b)
.map (destructuring)
const array = generateTestArray(); array.map(({a,b}) => a + b)
.for (init array)
const array = generateTestArray(); const r = new Array(array.length); for (let i = 0; i < array.length; ++i) { r[i] = array[i].a + array[i].b; }
.reduce
const array = generateTestArray(); array.reduce((p, x) => p + x.a + x.b, 0);
.reduce (destructuring)
const array = generateTestArray(); array.reduce((p, {a,b}) => p + a + b, 0);
for..of (reduce)
const array = generateTestArray(); let r = 0; for (const x of array) { r += x.a + x.b; }
for..of (reduce) (destructuring)
const array = generateTestArray(); let r = 0; for (const {a,b} of array) { r += a + b; }

Historical Performance Data aggregated from 474 community runs

Desktop Results:

Chrome 355 runs

.for (init array)

34/s

.reduce

31/s

.reduce (destructuring)

31/s

for..of (reduce)

30/s

for..of (reduce) (destructuring)

30/s

for..of

30/s

.forEach

22/s

.map

21/s

.map (destructuring)

21/s

for..of (destructuring)

21/s

Fastest: .for (init array) (1.6x faster)

View exact numbers

✓ .for (init array): 34 ops/sec
• .reduce: 31 ops/sec
• .reduce (destructuring): 31 ops/sec
• for..of (reduce): 30 ops/sec
• for..of (reduce) (destructuring): 30 ops/sec
• for..of: 30 ops/sec
• .forEach: 22 ops/sec
• .map: 21 ops/sec
• .map (destructuring): 21 ops/sec
• for..of (destructuring): 21 ops/sec

Firefox 67 runs

.forEach

38/s

.reduce (destructuring)

37/s

for..of

37/s

.reduce

37/s

for..of (reduce)

36/s

.for (init array)

35/s

for..of (reduce) (destructuring)

34/s

.map

32/s

.map (destructuring)

32/s

for..of (destructuring)

32/s

Fastest: .forEach (1.2x faster)

View exact numbers

✓ .forEach: 38 ops/sec
• .reduce (destructuring): 37 ops/sec
• for..of: 37 ops/sec
• .reduce: 37 ops/sec
• for..of (reduce): 36 ops/sec
• .for (init array): 35 ops/sec
• for..of (reduce) (destructuring): 34 ops/sec
• .map: 32 ops/sec
• .map (destructuring): 32 ops/sec
• for..of (destructuring): 32 ops/sec

Safari 13 runs

for..of

110/s

.forEach

108/s

.reduce (destructuring)

104/s

for..of (reduce)

103/s

.reduce

103/s

for..of (reduce) (destructuring)

102/s

.for (init array)

102/s

.map

98/s

.map (destructuring)

96/s

for..of (destructuring)

92/s

Fastest: for..of (1.2x faster)

View exact numbers

✓ for..of: 110 ops/sec
• .forEach: 108 ops/sec
• .reduce (destructuring): 104 ops/sec
• for..of (reduce): 103 ops/sec
• .reduce: 103 ops/sec
• for..of (reduce) (destructuring): 102 ops/sec
• .for (init array): 102 ops/sec
• .map: 98 ops/sec
• .map (destructuring): 96 ops/sec
• for..of (destructuring): 92 ops/sec

Other 6 runs

for..of (reduce)

30/s

.reduce

29/s

.reduce (destructuring)

29/s

for..of

28/s

.for (init array)

27/s

for..of (reduce) (destructuring)

22/s

for..of (destructuring)

18/s

.map (destructuring)

17/s

.map

16/s

.forEach

11/s

Fastest: for..of (reduce) (2.8x faster)

View exact numbers

✓ for..of (reduce): 30 ops/sec
• .reduce: 29 ops/sec
• .reduce (destructuring): 29 ops/sec
• for..of: 28 ops/sec
• .for (init array): 27 ops/sec
• for..of (reduce) (destructuring): 22 ops/sec
• for..of (destructuring): 18 ops/sec
• .map (destructuring): 17 ops/sec
• .map: 16 ops/sec
• .forEach: 11 ops/sec

Mobile Results:

Chrome 24 runs

for..of (reduce) (destructuring)

14/s

for..of (reduce)

14/s

.for (init array)

13/s

for..of

13/s

.reduce

12/s

.reduce (destructuring)

12/s

.forEach

8/s

for..of (destructuring)

8/s

.map

6/s

.map (destructuring)

6/s

Fastest: for..of (reduce) (destructuring) (2.3x faster)

View exact numbers

✓ for..of (reduce) (destructuring): 14 ops/sec
• for..of (reduce): 14 ops/sec
• .for (init array): 13 ops/sec
• for..of: 13 ops/sec
• .reduce: 12 ops/sec
• .reduce (destructuring): 12 ops/sec
• .forEach: 8 ops/sec
• for..of (destructuring): 8 ops/sec
• .map: 6 ops/sec
• .map (destructuring): 6 ops/sec

Safari 9 runs

for..of

42/s

.reduce (destructuring)

36/s

.map

36/s

for..of (destructuring)

34/s

for..of (reduce)

33/s

.reduce

32/s

.for (init array)

32/s

.forEach

31/s

for..of (reduce) (destructuring)

31/s

.map (destructuring)

30/s

Fastest: for..of (1.4x faster)

View exact numbers

✓ for..of: 42 ops/sec
• .reduce (destructuring): 36 ops/sec
• .map: 36 ops/sec
• for..of (destructuring): 34 ops/sec
• for..of (reduce): 33 ops/sec
• .reduce: 32 ops/sec
• .for (init array): 32 ops/sec
• .forEach: 31 ops/sec
• for..of (reduce) (destructuring): 31 ops/sec
• .map (destructuring): 30 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
.forEach
for..of
for..of (destructuring)
.map
.map (destructuring)
.for (init array)
.reduce
.reduce (destructuring)
for..of (reduce)
for..of (reduce) (destructuring)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Linux

View result in a separate tab

.forEach

6/s

for..of

5/s

for..of (destructuring)

5/s

.reduce

5/s

.for (init array)

5/s

for..of (reduce)

5/s

for..of (reduce) (destructuring)

5/s

.reduce (destructuring)

5/s

.map (destructuring)

4/s

.map

4/s

View exact numbers

Test name	Executions per second
✓ .forEach	6 Ops/sec
for..of	5 Ops/sec
for..of (destructuring)	5 Ops/sec
.reduce	5 Ops/sec
.for (init array)	5 Ops/sec
for..of (reduce)	5 Ops/sec
for..of (reduce) (destructuring)	5 Ops/sec
.reduce (destructuring)	5 Ops/sec
.map (destructuring)	4 Ops/sec
.map	4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case created on MeasureThat.net. The benchmark compares the performance of different iteration methods in JavaScript: `forEach`, `for` loops, `map`, and `reduce`. Each test case uses a similar approach to generate an array of 1 million objects and performs a specific operation on each element.

**Iterators Compared**

The benchmark tests four types of iterators:

1. `.forEach`
2. `for` loops
3. `for..of` loops with destructuring (redundant in this case, as it's just an alias for `for`)
4. `map`

Each iterator is tested twice: once without any additional processing and again with a simple operation added to demonstrate the overhead of the iteration.

**Performance Results**

The benchmark results show the average number of executions per second (EPS) for each test case across various browsers. The top-performing iterations are:

1. `.forEach` (24-25 EPS)
2. `for` loops (36-37 EPS)
3. `map` (23-24 EPS)

**Comparison and Analysis**

The results indicate that:

* `.forEach` is the fastest iteration, likely due to its built-in performance characteristics.
* `for` loops are significantly faster than the other iterations, possibly because they allow for direct access to variables and don't incur the overhead of function calls or array manipulation.
* `map` is slower than expected, as it involves creating a new array and iterating over it, which can be costly in terms of performance.

**Conclusion**

In summary, the benchmark highlights the relative performance characteristics of different JavaScript iteration methods. `.forEach` is the fastest, while `for` loops are significantly faster due to their direct access to variables. Understanding these trade-offs can help developers optimize their code for better performance in specific scenarios.

Performance of JavaScript .forEach, .map and .reduce vs for and for..of (version: 0)

Comparing performance of: `.forEach vs for..of vs for..of (destructuring) vs .map vs .map (destructuring) vs .for (init array) vs .reduce vs .reduce (destructuring) vs for..of (reduce) vs for..of (reduce) (destructuring)`

Created: 5 years ago by: Registered User

Go to the latest result

.forEach

for..of

for..of (destructuring)

.map

.map (destructuring)

.for (init array)

.reduce

.reduce (destructuring)

for..of (reduce)

for..of (reduce) (destructuring)

Historical Performance Data aggregated from 474 community runs

Desktop Results:

Chrome 355 runs

Firefox 67 runs

Safari 13 runs

Other 6 runs

Mobile Results:

Chrome 24 runs

Safari 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Performance of JavaScript .forEach, .map and .reduce vs for and for..of (version: 0)

Comparing performance of: .forEach vs for..of vs for..of (destructuring) vs .map vs .map (destructuring) vs .for (init array) vs .reduce vs .reduce (destructuring) vs for..of (reduce) vs for..of (reduce) (destructuring)

Created: 5 years ago by: Registered User

Go to the latest result

.forEach

for..of

for..of (destructuring)

.map

.map (destructuring)

.for (init array)

.reduce

.reduce (destructuring)

for..of (reduce)

for..of (reduce) (destructuring)

Historical Performance Data aggregated from 474 community runs

Desktop Results:

Chrome 355 runs

Firefox 67 runs

Safari 13 runs

Other 6 runs

Mobile Results:

Chrome 24 runs

Safari 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `.forEach vs for..of vs for..of (destructuring) vs .map vs .map (destructuring) vs .for (init array) vs .reduce vs .reduce (destructuring) vs for..of (reduce) vs for..of (reduce) (destructuring)`