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;
}

AخA
 
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;
});

 
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;
}

 
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); }
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)

 
const array = generateTestArray();array.map(x => x.a + x.b)

.map (destructuring)
const array = generateTestArray(); array.map(({a,b}) => a + b)
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;
}

 
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);

 
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);
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; }
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; }
const array = generateTestArray();
let r = 0;
for (const {a,b} of array) {
r += a + b;
}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 2 hours ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
.forEach	19.5 Ops/sec
for..of	35.9 Ops/sec
for..of (destructuring)	23.9 Ops/sec
.map	23.1 Ops/sec
.map (destructuring)	28.9 Ops/sec
.for (init array)	30.1 Ops/sec
.reduce	27.1 Ops/sec
.reduce (destructuring)	26.5 Ops/sec
for..of (reduce)	31.2 Ops/sec
for..of (reduce) (destructuring)	43.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

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:

.forEach
for loops
for..of loops with destructuring (redundant in this case, as it's just an alias for for)
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:

.forEach (24-25 EPS)
for loops (36-37 EPS)
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.

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.

Related benchmarks:

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: 3 years ago by: Registered User

Jump to the latest result

.forEach

for..of

for..of (destructuring)

.map

.map (destructuring)