Benchmark: for (i < n) vs forEach vs for...of

Script Preparation code:

var arr = Array(1000);

Tests:

forloop
for (let i = 0; i < 1000; i++) { arr[i]; }
forEach
arr.forEach(it => { it; });
for...of
for (let it of arr) { it; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forloop
forEach
for...of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
forloop	4151418.0 Ops/sec
forEach	93793.1 Ops/sec
for...of	1839054.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and results.

**Benchmark Definition**

The benchmark measures the performance of three different approaches to iterate over an array:

1. **for loop**: A traditional `for` loop with an index variable (`i`) that increments on each iteration.
2. **forEach**: The `forEach` method, which iterates over an array using a callback function.
3. **for...of**: The new `for...of` loop syntax, introduced in ECMAScript 2015 (ES6), which allows iterating over arrays without an index variable.

**Options Compared**

The three options are compared in terms of their execution time. The benchmark is designed to test the performance of each approach on a large array of 1000 elements.

**Pros and Cons**

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

* **for loop**:
	+ Pros: Wide support across older browsers, easy to read and understand.
	+ Cons: Requires manual index management, which can lead to errors.
* **forEach**:
	+ Pros: Simple and readable syntax, eliminates the need for manual indexing.
	+ Cons: May have performance overhead due to callback function creation and execution.
* **for...of**:
	+ Pros: Modern, concise syntax that eliminates manual indexing.
	+ Cons: Requires support from modern browsers (Chrome 101 in this case).

**Library and Purpose**

None of the benchmark cases use any external libraries or frameworks. The arrays are created directly in the JavaScript code using `Array(1000)`.

**Special JS Feature/Syntax**

The benchmark uses the new `for...of` loop syntax, which is a feature introduced in ECMAScript 2015 (ES6). This syntax allows iterating over arrays without the need for an index variable, making it more concise and expressive.

**Other Alternatives**

If you're interested in exploring other iteration methods, here are some alternatives:

* **while loop**: Another traditional loop construct that can be used to iterate over arrays.
* **reduce()**: An array method that reduces the elements of an array to a single value. While not exactly the same as iterating over an array, it shares similarities with for loops.
* **map(), filter(), and every()**: These array methods are often used in combination with loops or conditionals to process arrays.

Keep in mind that these alternatives might have different performance characteristics, readability trade-offs, or use cases compared to the three options being benchmarked.

Related benchmarks:

for (i < n) vs forEach vs for...of (version: 0)

Comparing performance of: forloop vs forEach vs for...of

Created: 4 years ago by: Guest

Jump to the latest result

forloop

forEach

for...of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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