Benchmark: for vs foreach vs for..of vs for..of over entries (const) etc

Script Preparation code:

var array = Array.from({length: 100});
var t;
var s = new Set()

Tests:

for
for (let i = 0; i < array.length; i++) { s.add(array[i]) }
foreach
array.forEach(function(v, i) { s.add(v) });
for..of
for (const v of array) { s.add(v) }
for..of over entries
for (const [i, v] of array.entries()) { s.add(v) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
foreach
for..of
for..of over entries

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 144 on Windows

View result in a separate tab

foreach

1.7M/s

for..of

1.6M/s

for

1.4M/s

for..of over entries

1.2M/s

View exact numbers

Test name	Executions per second
✓ foreach	1,748,565 Ops/sec
for..of	1,590,720 Ops/sec
for	1,381,463 Ops/sec
for..of over entries	1,198,259 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 benchmark and analyze what's being tested, compared options, pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark definition is a comparison of loop performance using four different approaches:

1. `for` loop
2. `.forEach()` method
3. `for...of` loop with iteration over array elements
4. `for...of` loop with iteration over array entries (using the `entries()` method)

**Comparison Options**

The options being compared are:

* Iteration methods:
	+ `for` loop: manual indexing and incrementing
	+ `.forEach()` method: callback function that takes two arguments (element and index)
	+ `for...of` loop with iteration over array elements: implicit indexing and incrementing
	+ `for...of` loop with iteration over array entries: implicit indexing and incrementing, but using the `entries()` method to access both index and value
* Approach:
	+ Manual looping (index-based)
	+ Using an iterator method (.forEach(), for...of)

**Pros and Cons of Each Approach**

1. **Manual Looping (`for` loop)**
	* Pros: direct control over iteration, no additional dependencies required.
	* Cons: can be error-prone, requires manual indexing and incrementing, which can lead to performance issues due to cache misses.
2. **Using an Iterator Method (.forEach())**
	* Pros: concise, readable, and maintainable code, avoids manual indexing and incrementing.
	* Cons: may incur overhead due to the iterator method itself, potentially slower than manual looping.
3. **`for...of` Loop with Iteration over Array Elements**
	* Pros: implicit indexing and incrementing, concise and readable code, avoids manual indexing and incrementing.
	* Cons: may not work as expected if the array is modified during iteration, or if the loop needs to access both index and value.
4. **`for...of` Loop with Iteration over Array Entries**
	* Pros: implicit indexing and incrementing, concise and readable code, avoids manual indexing and incrementing.
	* Cons: may incur additional overhead due to accessing both index and value using `entries()`, potentially slower than the previous option.

**Library Usage**

None of the options explicitly use a library. However, `.forEach()` method is part of the Array prototype, which is a built-in JavaScript feature.

**Special JS Features/Syntax**

No special JS features or syntax are mentioned in this benchmark. The code uses standard JavaScript syntax and does not require any advanced features like async/await, Promises, or Web Workers.

**Other Considerations**

* **Cache Locality**: In the `for` loop, accessing array elements by index can lead to poor cache locality due to cache misses, which negatively impacts performance.
* **Memory Allocation**: The `.forEach()` method may incur additional memory allocation due to creating an iterator object, while the `for...of` loops do not allocate new memory for iteration.
* **Device-Specific Optimizations**: Some devices or browsers might optimize certain loop approaches over others. This benchmark provides a general comparison across different environments.

**Alternatives**

Other alternatives for iterating over arrays in JavaScript include:

* Using a `while` loop with manual indexing and incrementing
* Using the `map()` method to create a new array of transformed values
* Using the `reduce()` method to accumulate values

These alternatives have their own trade-offs, such as added complexity or potential performance overhead.

for vs foreach vs for..of vs for..of over entries (const) etc (version: 0)

Compare loop performance

Comparing performance of: `for vs foreach vs for..of vs for..of over entries`

Created: 2 years ago by: Guest

Go to the latest result

for

foreach

for..of

for..of over entries

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

for vs foreach vs for..of vs for..of over entries (const) etc (version: 0)

Compare loop performance

Comparing performance of: for vs foreach vs for..of vs for..of over entries

Created: 2 years ago by: Guest

Go to the latest result

for

foreach

for..of

for..of over entries

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: `for vs foreach vs for..of vs for..of over entries`