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

HTML Preparation code:

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

Tests:

forEach
var res = 0; testData.forEach(function(x) { return x + 2; });
for optimized
var res = 0; for (var i = 0, len = testData.length; i < len; i++) { const b = testData[i] + 2; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
for optimized

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/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
forEach	8937.4 Ops/sec
for optimized	268985.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros/cons.

**Benchmark Definition**

The benchmark measures the performance of three different loop constructs in JavaScript: `forEach`, `for` (with optimized length variable), `for...in`, and `for...of`. The benchmark is based on an archived jsperf benchmark and aims to compare the execution time of these four loops.

**Loop Constructs Being Compared**

1. **`forEach`**: This loop uses the `Array.prototype.forEach()` method, which iterates over the elements of an array, executing a provided callback function for each element.
2. **`for` (optimized length variable)`**: This loop uses a traditional `for` loop with an optimized length variable, where the length of the array is stored in a variable and used to iterate over the elements.
3. **`for...in`**: This loop uses the `for...in` loop construct, which iterates over the properties (including indices) of an object or array.
4. **`for...of`**: This loop uses the `for...of` loop construct, which iterates over the values of an iterable object, such as an array.

**Pros and Cons of Each Approach**

1. **`forEach`**:
	* Pros: concise and expressive syntax, easy to read and maintain.
	* Cons: may be slower due to the overhead of calling `Array.prototype.forEach()` for each element.
2. **`for` (optimized length variable)`**:
	* Pros: faster execution time compared to `forEach`, as it avoids the overhead of function calls.
	* Cons: more verbose syntax, which can make it harder to read and maintain.
3. **`for...in`**:
	* Pros: flexible and can be used with objects or arrays.
	* Cons: slower execution time due to the overhead of iterating over properties (including indices), which may not be necessary for array iteration.
4. **`for...of`**:
	* Pros: concise and expressive syntax, easy to read and maintain.
	* Cons: relatively new feature, may not be supported by older browsers or environments.

**Library/Functionality Used**

None of the loops use an external library or functionality specifically designed for loop iteration.

**Special JS Feature/Syntax**

The benchmark uses some newer JavaScript features:

1. **Template literals** (`\r\nvar res = 0;\ntestData.forEach(function(x) {\r\n return x + 2;\r\n});` and `\r\nfor (var i = 0, len = testData.length; i < len; i++) {\r\n const b = testData[i] + 2;\r\n}`)
2. **Arrow functions** (`\r\nfunction(x) {\r\n return x + 2;\r\n}`)

These features are supported in modern JavaScript environments.

**Alternatives**

Other loop constructs available in JavaScript include:

1. `while` loops
2. `for...of` with an iterator object (e.g., `Array.prototype[Symbol.iterator]`)
3. Custom loops using indexed array iteration or other approaches

Note that the choice of loop construct ultimately depends on the specific requirements and constraints of the project, such as performance, readability, and compatibility with different environments.

Related benchmarks:

forEach vs for len vs for in vs 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 optimized

Created: one year ago by: Registered User

Jump to the latest result

forEach

for optimized

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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