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

forEach vs for len vs for in vs for of vs babel for of loops (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: 5 years ago by: Guest

Go 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; for (var i = 0; i < testData.length; 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; } } }

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 runs

for optimized

15.6M/s

for

15.4M/s

reduce

14.4M/s

while

11.4M/s

for of

5.5M/s

forEach

5.2M/s

for in

544K/s

for of babel

2K/s

Fastest: for optimized (7773.8x faster)

View exact numbers

✓ for optimized : 15,638,448 ops/sec
• for: 15,443,394 ops/sec
• reduce : 14,372,275 ops/sec
• while: 11,410,351 ops/sec
• for of: 5,490,128 ops/sec
• forEach: 5,235,746 ops/sec
• for in: 543,974 ops/sec
• for of babel: 2,012 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
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: one year ago)

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

for optimized

22.0M/s

for

21.5M/s

reduce

20.2M/s

while

14.5M/s

forEach

6.0M/s

for of

3.2M/s

for in

544K/s

for of babel

2K/s

View exact numbers

Test name	Executions per second
✓ for optimized	22,005,912 Ops/sec
for	21,546,776 Ops/sec
reduce	20,171,774 Ops/sec
while	14,549,508 Ops/sec
forEach	5,975,196 Ops/sec
for of	3,173,246 Ops/sec
for in	543,974 Ops/sec
for of babel	2,074 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases to explain what's being tested, compared, and their pros and cons.

**Benchmark Definition:**

The benchmark tests six different ways to iterate over an array of numbers:

1. `forEach`
2. `for` loop
3. `for` loop with optimized length variable (`len`)
4. `reduce` method
5. `while` loop
6. `for...in` loop (which is not recommended for iterating over arrays)

The benchmark uses a simple script that creates an array of 100 numbers and initializes a sum variable to zero.

**Test Cases:**

Each test case represents one of the six iteration methods being tested. The test cases are:

1. `forEach`: using the `forEach` method to iterate over the array
2. `for`: using a traditional `for` loop to iterate over the array
3. `for optimized`: using a `for` loop with an optimized length variable (`len`)
4. `reduce`: using the `reduce` method to sum up the array elements
5. `while`: using a `while` loop to iterate over the array
6. `for in`: using the `for...in` loop (not recommended for arrays) to iterate over the array

**Comparison:**

The benchmark is testing the performance of each iteration method, with the goal of identifying which one is the fastest.

**Pros and Cons:**

Here's a brief summary of the pros and cons of each iteration method:

1. `forEach`:
	* Pros: concise, easy to read, and works well for most use cases.
	* Cons: can be slower than traditional loops because it involves a function call overhead.
2. `for` loop:
	* Pros: fast, efficient, and widely supported.
	* Cons: can lead to code complexity if not used carefully.
3. `for optimized` (using `len`):
	* Pros: can improve performance by avoiding the length variable lookup on each iteration.
	* Cons: still uses a traditional loop, which may not be as readable or maintainable as other options.
4. `reduce` method:
	* Pros: concise and expressive, easy to read and write.
	* Cons: may be slower than traditional loops due to the function call overhead and the need for an initial value.
5. `while` loop:
	* Pros: fast, efficient, and works well for most use cases.
	* Cons: can lead to code complexity if not used carefully and may require more maintenance.
6. `for in` (not recommended):
	* Pros: none (this method is generally considered bad practice).
	* Cons: can lead to unexpected behavior, performance issues, and code maintainability problems due to its non-standard nature.

**Performance Results:**

The benchmark results show the execution speed of each iteration method for Chrome 123 on a Windows 10 desktop. The results are:

1. `forEach`: ~520,000 executions per second (sps)
2. `for optimized`: ~960,000 sps
3. `for`: ~1,300,000 sps
4. `reduce`: ~110,000 sps ( Note: reduce method can be slow because of the function call overhead)
5. `while`: ~2,500,000 sps
6. `for in`: ~0 executions per second (due to its non-standard nature and lack of optimization)

**Conclusion:**

The results show that the traditional `for` loop is generally the fastest iteration method for this benchmark, followed closely by the optimized `for` loop using `len`. The `while` loop and `reduce` method are also relatively fast. However, the `forEach` method is slower due to its function call overhead.

It's essential to note that these results may not generalize to all JavaScript engines or use cases, and other factors like code complexity, readability, and maintainability should be considered when choosing an iteration method.

forEach vs for len vs for in vs for of vs babel for of loops (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: 5 years ago by: Guest

Go to the latest result

forEach

for

for optimized

reduce

while

for in

for of

for of babel

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 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 vs for optimized vs reduce vs while vs for in vs for of vs for of babel`