Benchmark: for-loop vs for-of perf test

HTML Preparation code:

<script>
  const listOfHundred = Array.from({
    length: 100
}, (_, i) => i)
const listOfThousand = Array.from({
    length: 1000
}, (_, i) => i)
const listOfMillion = Array.from({
    length: 1_000_000
}, (_, i) => i)
</script>

Tests:

For-loop 100 Items
let r = 0 for (let i = 0; i < listOfHundred.length; ++i) { r += listOfHundred[i] }
For-of 100 Items
let r = 0 for (const x of listOfHundred) { r += x }
For-loop 1000 Items
let r = 0 for (let i = 0; i < listOfThousand.length; ++i) { r += listOfThousand[i] }
For-of 1000 items
let r = 0 for (const x of listOfThousand) { r += x }
For-loop 1mil items
let r = 0 for (let i = 0; i < listOfMillion.length; ++i) { r += listOfMillion[i] }
For-of 1mil items
let r = 0 for (const x of listOfMillion) { r += x }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For-loop 100 Items
For-of 100 Items
For-loop 1000 Items
For-of 1000 items
For-loop 1mil items
For-of 1mil items

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/123.0.0.0 Safari/537.36 OPR/109.0.0.0

Browser/OS: Opera 109 on Windows

View result in a separate tab

For-of 100 Items

2.5M/s

For-of 1000 items

500K/s

For-loop 100 Items

29K/s

For-loop 1000 Items

3K/s

For-of 1mil items

43/s

For-loop 1mil items

3/s

View exact numbers

Test name	Executions per second
✓ For-of 100 Items	2,462,574 Ops/sec
For-of 1000 items	500,170 Ops/sec
For-loop 100 Items	28,980 Ops/sec
For-loop 1000 Items	2,843 Ops/sec
For-of 1mil items	43 Ops/sec
For-loop 1mil items	3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark definition and test cases for you.

**Benchmark Definition:**
The benchmark measures the performance difference between using traditional `for` loops versus the more modern `for...of` syntax in JavaScript.

**Script Preparation Code:**
The script creates three arrays with different sizes (`listOfHundred`, `listOfThousand`, and `listOfMillion`) filled with numbers from 0 to their respective lengths. These arrays are used as input for the benchmark tests.

**Individual Test Cases:**

1. **For-loop 100 Items**: This test case uses a traditional `for` loop to iterate over `listOfHundred` and accumulate a sum.
2. **For-of 100 Items**: This test case uses the `for...of` syntax to iterate over `listOfHundred` and accumulate a sum.
3. **For-loop 1000 Items**: Similar to the first test case, but with `listOfThousand`.
4. **For-of 1000 items**: Similar to the second test case, but with `listOfThousand`.
5. **For-loop 1mil items**: This test case uses a traditional `for` loop to iterate over `listOfMillion` and accumulate a sum.
6. **For-of 1mil items**: This test case uses the `for...of` syntax to iterate over `listOfMillion` and accumulate a sum.

**Pros and Cons of Each Approach:**

* Traditional `for` loops:
	+ Pros: Wide compatibility, easy to understand for beginners.
	+ Cons: Can be slower due to the overhead of incrementing the loop variable.
* `for...of` syntax:
	+ Pros: More concise, can be faster since it avoids the overhead of incrementing a loop variable.
	+ Cons: Less widely supported in older browsers and versions.

**Library Used:**
None explicitly mentioned, but it's likely that the benchmark uses built-in JavaScript functionality to iterate over arrays.

**Special JS Feature/Syntax:**
The `for...of` syntax is a relatively new feature introduced in ECMAScript 2015 (ES6). It provides a more concise and expressive way to iterate over arrays and other iterable objects.

**Other Considerations:**

* The benchmark uses the same input data for all test cases, which means that any differences in performance are likely due to the loop iteration mechanism rather than the input data.
* The benchmark does not consider other factors that might affect performance, such as memory allocation or cache behavior.
* The benchmark is likely designed to be run on a desktop environment, given the presence of Opera and Chrome browsers.

**Alternatives:**

* Other loop iteration mechanisms, such as `forEach` or `reduce`, could be used as alternatives to traditional `for` loops or `for...of` syntax.
* Benchmarks that focus on other aspects of performance, such as memory allocation or cache behavior, might provide more comprehensive insights into the performance characteristics of JavaScript code.

for-loop vs for-of perf test (version: 0) Benchmark.js

Checking to see the performance differences of for-loop vs for-of

Comparing performance of: `For-loop 100 Items vs For-of 100 Items vs For-loop 1000 Items vs For-of 1000 items vs For-loop 1mil items vs For-of 1mil items`

Created: 3 years ago by: Guest

Go to the latest result

For-loop 100 Items

For-of 100 Items

For-loop 1000 Items

For-of 1000 items

For-loop 1mil items

For-of 1mil items

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

for-loop vs for-of perf test (version: 0) Benchmark.js

Checking to see the performance differences of for-loop vs for-of

Comparing performance of: For-loop 100 Items vs For-of 100 Items vs For-loop 1000 Items vs For-of 1000 items vs For-loop 1mil items vs For-of 1mil items

Created: 3 years ago by: Guest

Go to the latest result

For-loop 100 Items

For-of 100 Items

For-loop 1000 Items

For-of 1000 items

For-loop 1mil items

For-of 1mil items

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-loop 100 Items vs For-of 100 Items vs For-loop 1000 Items vs For-of 1000 items vs For-loop 1mil items vs For-of 1mil items`