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

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: 19 days 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

Test name	Executions per second
forEach	5975196.5 Ops/sec
for	21546776.0 Ops/sec
for optimized	22005912.0 Ops/sec
reduce	20171774.0 Ops/sec
while	14549508.0 Ops/sec
for in	543973.9 Ops/sec
for of	3173246.5 Ops/sec
for of babel	2074.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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.

Related benchmarks:

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: 4 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 6 months ago):