Benchmark: forEach vs for len vs for in vs for of fix

forEach vs for len vs for in vs for of fix (version: 1)

created based off of an archived jsperf benchmark: http://web.archive.org/web/20191008221700/https://jsperf.com/foreach-vs-for-loop-vs-for-in-vs-for-of-vs-babel-for-of change var to let. for of returns the value directly. So you don't get value from testData array.

Comparing performance of: forEach vs for vs for optimized vs reduce vs while vs for in vs for of

Created: 9 days ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script>
    Benchmark.prototype.setup = function() {
        var testData = [];
        for (var i = 0; i < 100; i++) {
            testData.push(i);
        }
    };
</script>

Tests:

forEach
let res = 0; testData.forEach(function(x) { res += x; });
for
let res = 0; for (let i = 0; i < testData.length; i++) { res += testData[i]; }
for optimized
let res = 0; for (let i = 0, len = testData.length; i < len; i++) { res += testData[i]; }
reduce
var res = testData.reduce(function(sum, x) { return sum + x; }, 0);
while
var res = 0; var i = testData.length; while (i--) { res += testData[i]; }
for in
var res = 0; for (let data in testData) { res += testData[data]; }
for of
var res = 0; for (var data of testData) { res += data; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
for
for optimized
reduce
while
for in
for of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 18 hours ago)

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
forEach	9400808.0 Ops/sec
for	21800396.0 Ops/sec
for optimized	21673488.0 Ops/sec
reduce	13812274.0 Ops/sec
while	8095509.5 Ops/sec
for in	914395.6 Ops/sec
for of	16905940.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 days ago):

LLMs can make mistakes. Check important info.

The benchmark conducted at MeasureThat.net evaluates the performance of various JavaScript iteration methods. Specifically, it compares the following constructs:

1. **forEach**: This method iterates over each element in the array and executes a provided function on each element.
   - *Pros*: Simplifies iteration syntax, automatically handles entry points for each element.
   - *Cons*: Generally slower due to function calls for each element, cannot be canceled, and does not support breaking out of the loop early.

2. **for**: The classic for loop that allows iteration through an array using an index.
   - *Pros*: More control over the loop, optimization opportunities with index access, and ability to break or continue.
   - *Cons*: More verbose than other iteration styles and less readable for newcomers.

3. **for optimized**: This variation of the for loop precomputes the length of the array outside the loop to reduce computation time within the loop.
   - *Pros*: Potentially faster than a regular for loop by reducing property access overhead from repeatedly checking the length during iterations.
   - *Cons*: Inelegant for small iterations or when the size might change during execution.

4. **reduce**: This method reduces the array to a single value by executing a reducer function on each element.
   - *Pros*: Elegant and functional programming style, great for conveying intent.
   - *Cons*: Requires more processing due to functional calls, can lead to unclear intentions for simple sums.

5. **while**: Utilizes a while-loop to iterate until a specified condition is met.
   - *Pros*: Flexible loop structure that can be controlled via conditions.
   - *Cons*: Slightly less intuitive than a for loop, and programmers have to manage their own index variable and loop condition.

6. **for in**: This loop iterates over the enumerable properties of an object.
   - *Pros*: Can iterate over both array indices and property names of objects.
   - *Cons*: Usually inefficient for arrays due to potential iteration over inherited properties and does not guarantee order; not recommended for array iteration.

7. **for of**: This ES6 syntax allows iteration over iterable objects such as arrays directly returning their values.
   - *Pros*: Clean and readable, with automatic handling of iteration; can work with other iterable types.
   - *Cons*: Cannot access index values directly within the loop; less control over iteration.

### Benchmark Results Summary
From the benchmark results executed on the Chrome 131 browser, the "for optimized" loop exhibited the highest performance with approximately 8.3 million executions per second, closely followed by the traditional "for" loop. The "while" and "reduce" followed, showing moderate performance, while "for of" and "forEach" showed slower performance comparatively. The "for in" iteration was the slowest, emphasizing its unsuitability for array traversal.

### Other Considerations
- The choice of iteration method can have significant implications on performance in scenarios where arrays are large or performance characteristics are critical. 
- For functional paradigms emphasizing immutability, constructs like `reduce` may be more appropriate despite potentially lower performance. 
- Readability and maintainability are essential factors to consider; while "for optimized" and "for" yield better performance, they are more complex syntactically. In contrast, "forEach" and "for of" offer readability but at a cost in performance.
- Ultimately, the decision on which loop to use can also depend on the specific requirements of the application, coding standards, and the target audience's familiarity with the specific syntax.

### Alternatives
- **for await of**: In asynchronous programming, this pattern can be used for iteration over asynchronous iterable objects.
- **map/filter**: These are built-in methods that offer high-level abstractions for data transformation and filtering but can come at performance costs due to function calls.
- **performance.now()**: Consider using this for more precise benchmarking, especially if executing in scenarios where performance nuances matter.

By evaluating these iteration methods, developers can make informed choices that balance performance, readability, and maintainability tailored to their application’s needs.

Related benchmarks:

forEach vs for len vs for in vs for of fix (version: 1)

created based off of an archived jsperf benchmark: http://web.archive.org/web/20191008221700/https://jsperf.com/foreach-vs-for-loop-vs-for-in-vs-for-of-vs-babel-for-of change var to let. for of returns the value directly. So you don't get value from testData array.

Comparing performance of: forEach vs for vs for optimized vs reduce vs while vs for in vs for of

Created: 9 days ago by: Registered User

Jump to the latest result

forEach

for

for optimized

reduce

while

for in

for of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 days ago):