Benchmark: forEach vs for len vs for in vs for of vs babel for of loops 2

forEach vs for len vs for in vs for of vs babel for of loops 2 (version: 0)

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

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

Created: 2 years ago by: Guest

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
var res = 0; testData.forEach(function(x) { res += x; });
for
var res = 0; ee = testData.length for (var i = 0; i < ee; i++) { res += testData[i]; }
for optimized
var res = 0; for (var 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 (var data in testData) { res += testData[i]; }
for of
var res = 0; for (var data of testData) { res += testData[i]; }
for of babel
var res = 0; var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = testData[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var value = _step.value; console.log(value); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { res += testData[i]; if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } }

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
for of babel

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 102 on Windows

View result in a separate tab

Test name	Executions per second
forEach	2589013.5 Ops/sec
for	7035069.5 Ops/sec
for optimized	9134145.0 Ops/sec
reduce	6604989.0 Ops/sec
while	5728302.5 Ops/sec
for in	258594.4 Ops/sec
for of	3601486.5 Ops/sec
for of babel	384.9 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll provide an explanation of the JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark compares six different approaches to iterate over arrays in JavaScript:

1. `forEach`
2. `for` loop
3. Optimized `for` loop (with `len` variable)
4. `reduce` method
5. `while` loop
6. `for...of` loop with and without Babel optimization

**Comparison of Iteration Approaches**

Here's a brief overview of each approach:

1. **`forEach`**: Iterates over the array using the `forEach` method, which calls a callback function for each element in the array.
2. **`for` loop**: Iterates over the array using a traditional `for` loop with an index variable (`i`) that increments for each iteration.
3. **Optimized `for` loop**: Similar to the traditional `for` loop, but uses a cached `len` variable to avoid unnecessary iterations.
4. **`reduce` method**: Iterates over the array using the `reduce` method, which applies a reduction function to all elements in the array.
5. **`while` loop**: Iterates over the array using a `while` loop with an index variable (`i`) that increments for each iteration.
6. **`for...of` loop** (with and without Babel optimization): Iterates over the array using the `for...of` loop, which allows iterating directly over elements in an array.

**Key differences**

* The `forEach` method is generally faster than traditional loops because it avoids unnecessary assignments to local variables.
* The optimized `for` loop can be slightly faster than the traditional `for` loop due to caching the `len` variable.
* The `reduce` method is designed for accumulating values, not iterating over arrays directly. However, it can still be faster than traditional loops due to its internal optimizations.
* The `while` loop is generally slower than other approaches because it requires more explicit indexing and incrementing.
* The `for...of` loop with Babel optimization may provide better performance in some cases due to reduced overhead of function calls.

**MeasureThat.net Results**

The results show that:

* The optimized `for` loop (with `len` variable) is the fastest approach, followed closely by the `forEach` method.
* The traditional `for` loop and `while` loop are slower than the top two approaches.
* The `reduce` method is faster than the `for...of` loop without Babel optimization, but slower with Babel optimization.
* The `for...of` loop with Babel optimization is surprisingly fast, likely due to reduced overhead of function calls.

Keep in mind that these results may vary depending on the specific use case and implementation details.

Related benchmarks:

forEach vs for len vs for in vs for of vs babel for of loops 2 (version: 0)

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

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

Created: 2 years ago by: Guest

Jump to the latest result

forEach

for

for optimized

reduce

while

for in

for of

for of babel

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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