Benchmark: for vs foreach for (cached length) vs for..of

Script Preparation code:

var array = new Array(100);
for (var i = 0; i < array.length; i++) {
  array[i] = i * 10000
}

Tests:

for
for (let i = 0; i < array.length; i++) { array[i]; }
foreach
array.forEach((i) => { array[i]; });
for (cached length)
for (let i = 0, length = array.length; i < length; i++) { array[i]; }
for..of
for (var i of array) { array[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
foreach
for (cached length)
for..of

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of four different loop constructs in JavaScript:

1. `for` loops with and without caching the array length.
2. `foreach` loops, which are a part of the ECMAScript standard.

The benchmark aims to measure the execution speed of each loop construct for an array of 100 elements.

**Loop Constructs**

Here's a brief explanation of each loop construct:

### 1. Traditional `for` loop

```javascript
for (var i = 0; i < array.length; i++) {
  array[i];
}
```

This is the most basic type of loop in JavaScript, where we increment a counter variable (`i`) to iterate over the array elements.

**Pros and Cons:**

* Pros:
	+ Wide support across browsers and platforms.
	+ Easy to understand and use for simple iterations.
* Cons:
	+ Can be slower due to the overhead of manual index management.

### 2. `foreach` loop (ECMAScript standard)

```javascript
array.forEach((i) => {
  array[i];
});
```

This is a newer, more concise way of iterating over arrays in JavaScript. The `forEach` method executes a callback function once for each element in the array.

**Pros and Cons:**

* Pros:
	+ More readable and expressive than traditional `for` loops.
	+ Built-in support across browsers and platforms (although some older versions might not have it).
* Cons:
	+ Can be slower due to the overhead of calling a method on each array element.
	+ Requires understanding of the callback function syntax.

### 3. `for` loop with cached length

```javascript
for (var i = 0, length = array.length; i < length; i++) {
  array[i];
}
```

This variant precomputes the array length and stores it in a variable (`length`). This way, we avoid having to access `array.length` on each iteration.

**Pros and Cons:**

* Pros:
	+ Can be faster than traditional `for` loops due to reduced index lookups.
	+ Reduces overhead of accessing `array.length` repeatedly.
* Cons:
	+ Requires precomputation of array length, which might not be necessary for small arrays or performance-critical code.

### 4. `for..of` loop (ECMAScript standard)

```javascript
for (var i of array) {
  array[i];
}
```

This is a newer, more concise way of iterating over arrays in JavaScript. The `for...of` loop executes an expression (in this case, the expression that yields each element) for each iteration.

**Pros and Cons:**

**Library Usage**

None of the provided loop constructs rely on any external libraries. However, if you were to use other libraries or frameworks for your benchmarking code, you would need to consider their potential impact on performance and overall results.

**Special JavaScript Features**

The `foreach` loop and `for...of` loop utilize special ECMAScript features: the `forEach` method (ECMAScript standard) and the `for...of` loop (ECMAScript standard), respectively. These features are designed to make array iteration more concise and expressive, but might not be supported in older browsers or platforms.

**Alternative Loop Constructs**

There are other loop constructs available in JavaScript, such as:

* `while` loops: suitable for simple iterations with manual index management.
* Array methods like `map()`, `filter()`, and `reduce()`: designed for more complex array operations and transformations.

Latest run results:

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

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

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for	134827.9 Ops/sec
foreach	163452.4 Ops/sec
for (cached length)	308336.5 Ops/sec
for..of	302345.2 Ops/sec

Related benchmarks:

for vs foreach for (cached length) vs for..of (version: 0)

Compare loop performance

Comparing performance of: for vs foreach vs for (cached length) vs for..of

Created: 3 years ago by: Guest

Jump to the latest result

for

foreach

for (cached length)

for..of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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