Benchmark: for of vs Array.reduce vs Array.forEach vs for i for summing and array of integers

Script Preparation code:

var arr = [];
for(var i=0; i < 10000; i++) {
  arr.push(Math.floor(Math.random() * Math.floor(10000)));
}

Tests:

for of
var sum = 0; for (var e of arr) { sum += e; }
forEach
var sum = 0; arr.forEach(e => {sum += e;})
reduce
var sum = arr.reduce((acm, current) => acm + current);
for i
var sum = 0; for (var i = 0; i < arr.length; i++) { sum += arr[i]; }

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 15 runs

for of

148K/s

reduce

73K/s

forEach

56K/s

for i

2K/s

Fastest: for of (98.7x faster)

View exact numbers

✓ for of: 148,181 ops/sec
• reduce: 72,810 ops/sec
• forEach: 56,468 ops/sec
• for i: 1,501 ops/sec

Firefox 7 runs

for i

131K/s

reduce

23K/s

forEach

20K/s

for of

16K/s

Fastest: for i (8.3x faster)

View exact numbers

✓ for i: 130,601 ops/sec
• reduce: 22,598 ops/sec
• forEach: 20,254 ops/sec
• for of: 15,692 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 of
forEach
reduce
for i

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

for of

159K/s

reduce

91K/s

forEach

60K/s

for i

2K/s

View exact numbers

Test name	Executions per second
✓ for of	158,769 Ops/sec
reduce	91,043 Ops/sec
forEach	60,427 Ops/sec
for i	1,699 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the JavaScript microbenchmark on MeasureThat.net.

**Benchmark Overview**

The benchmark measures the performance of four looping methods in JavaScript:

1. `for...of`
2. `Array.forEach`
3. `Array.reduce`
4. `for` loop with a traditional index variable (`i`)

Each looping method is used to calculate the sum of an array of 10,000 random integers.

**Options Compared**

The benchmark compares the performance of these four looping methods:

* **Performance**: The execution speed of each looping method.
* **Cons**: Each looping method has its own trade-offs:
	+ `for...of` loops are concise and easy to read, but may not be as efficient as traditional loops.
	+ `Array.forEach` loops iterate over the array's elements, but require an explicit callback function.
	+ `Array.reduce` is a functional programming approach that reduces the array to a single value, which can be efficient for certain use cases.
	+ Traditional `for` loops are straightforward and often used, but may not be as concise or expressive as other looping methods.

**Pros and Cons**

Here's a brief summary of each looping method:

* **For...of**: Pros - concise, easy to read; Cons - potential performance overhead due to the iterator object.
* **Array.forEach**: Pros - convenient and expressive; Cons - requires an explicit callback function, which can lead to code duplication.
* **Array.reduce**: Pros - functional programming approach, efficient for summing or reducing arrays; Cons - may be less intuitive for those unfamiliar with functional programming concepts.
* **For** loop: Pros - straightforward and traditional; Cons - potentially less concise and readable.

**Library and Special JS Features**

None of the looping methods rely on external libraries. However, some features are used:

* `Math.floor` is used to generate random numbers within a specific range.
* The `Array.prototype.forEach`, `Array.prototype.reduce`, and `Array.prototype.push` methods are used by each looping method.

**Test Case Explanation**

Each test case uses the same script preparation code to initialize an array of 10,000 random integers. Then, each looping method is tested in isolation:

1. `for...of`: Iterates over the array using the `for...of` loop construct.
2. `Array.forEach`: Iterates over the array using the `forEach` method with a callback function.
3. `Array.reduce`: Reduces the array to a single value using the `reduce` method with an accumulator function.
4. Traditional `for` loop: Iterates over the array using a traditional `for` loop construct.

**Other Alternatives**

If you're interested in exploring other looping methods, consider:

* `Array.prototype.map`
* Arrow functions (`=>`)
* `Set` or `Map` data structures for more complex operations

Feel free to experiment with these alternatives and compare their performance on MeasureThat.net!

for of vs Array.reduce vs Array.forEach vs for i for summing and array of integers (version: 0)

Test which looping method has the best performance regarding getting the total sum of an array of integers in Javascript

Comparing performance of: `for of vs forEach vs reduce vs for i`

Created: 5 years ago by: Guest

Go to the latest result

for of

forEach

reduce

for i

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 15 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

for of vs Array.reduce vs Array.forEach vs for i for summing and array of integers (version: 0)

Test which looping method has the best performance regarding getting the total sum of an array of integers in Javascript

Comparing performance of: for of vs forEach vs reduce vs for i

Created: 5 years ago by: Guest

Go to the latest result

for of

forEach

reduce

for i

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 15 runs

Firefox 7 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: `for of vs forEach vs reduce vs for i`