Benchmark: Comparing For vs For of vs ForEach

Script Preparation code:

function GetId(){
	return Math.random().toString().slice(2, 10);
}

window.array = Array.from(new Array(10000)).map(GetId);

Tests:

For Loop
let res = ""; for(let i = 0; i < window.array.length; ++i){ res = window.array[i]; }
For of loop
let res = ""; for(let value of window.array){ res = value; }
ForEach loop
let res = ""; window.array.forEach(v => { res = v; })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For Loop
For of loop
ForEach loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 99 on Windows

View result in a separate tab

Test name	Executions per second
For Loop	394.3 Ops/sec
For of loop	192026.4 Ops/sec
ForEach loop	13806.7 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 benchmark and its components.

**Benchmark Purpose:**
The benchmark is designed to compare the performance of three different approaches for iterating over an array in JavaScript:

1. Traditional `for` loop
2. `for...of` loop
3. `forEach()` method

**Script Preparation Code:**
The script preparation code generates a large array of 10,000 elements with unique IDs using the `GetId()` function.

```javascript
function GetId(){ return Math.random().toString().slice(2, 10); }
window.array = Array.from(new Array(10000)).map(GetId);
```

**Html Preparation Code:**
There is no HTML preparation code provided for this benchmark.

**Individual Test Cases:**

1. **For Loop**
```javascript
let res = "";
for(let i = 0; i < window.array.length; ++i){
    res = window.array[i];
}
```
This test case uses a traditional `for` loop to iterate over the array and concatenate the elements to the result string `res`.

2. **For of Loop**
```javascript
let res = "";
for(let value of window.array){
    res = value;
}
```
This test case uses an `for...of` loop to iterate over the array and assign each element to the result string `res`.

3. **ForEach Loop**
```javascript
window.array.forEach(v => {
    res = v;
});
```
This test case uses the `forEach()` method to iterate over the array and assign each element to the result string `res`.

**Library Used:**
The benchmark does not use any external libraries.

**Special JS Features/Syntax:**

* The `for...of` loop is a relatively recent addition to JavaScript, introduced in ECMAScript 2015 (ES6). It provides a more concise and expressive way of iterating over arrays and other iterable objects.
* The `forEach()` method is a standard method on arrays in JavaScript, introduced in ECMAScript 2009 (ES5).

**Pros and Cons:**

1. **Traditional For Loop**
	* Pros:
		+ Widely supported and understood by developers
		+ Can be used with any iterable object, not just arrays
	* Cons:
		+ Can be error-prone due to the need for manual index management
		+ Not as concise or expressive as other options
2. **For of Loop**
	* Pros:
		+ Concise and expressive syntax
		+ Easy to read and understand
		+ Reduces the risk of errors due to automatic index management
	* Cons:
		+ Less widely supported than traditional `for` loops (although this is changing with the adoption of ES6)
3. **ForEach Loop**
	* Pros:
		+ Concise and expressive syntax
		+ Easy to read and understand
		+ Reduces the risk of errors due to automatic index management
	* Cons:
		+ Less intuitive for some developers who are not familiar with the `forEach()` method

**Alternatives:**

1. **Other Iteration Methods:** There are other iteration methods available in JavaScript, such as the `map()`, `filter()`, and `reduce()` methods, which can be used to iterate over arrays.
2. **Other Loops:** Other loop constructs, such as `while` loops or recursive functions, can also be used for iteration.

In summary, the benchmark is designed to compare the performance of three different approaches for iterating over an array in JavaScript: traditional `for` loops, `for...of` loops, and `forEach()` methods. The results will help developers understand the trade-offs between these approaches and choose the most efficient solution for their specific use case.

Related benchmarks:

Comparing For vs For of vs ForEach (version: 0)

Comparing performance of: For Loop vs For of loop vs ForEach loop

Created: 3 years ago by: Registered User

Jump to the latest result

For Loop

For of loop

ForEach loop

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):