Benchmark: forloop performance test

Script Preparation code:

var arr = [];
const count = 1000;
for(let i = 0; i<count; i++)
{
  arr.push(i);
}

Tests:

for ... .length
let sum = 0; for (let i = 0; i < arr.length; i++){ sum += arr[i]; } if (sum !== 499500) throw 42;
for ... of
let sum = 0; let i = 0; for (let v of arr) { sum += v; ++i; } if (sum !== 499500) throw 42;
for ... .length (cached)
let sum = 0; for (let i = 0, l = arr.length; i < l; ++i){ sum += arr[i]; } if (sum !== 499500) throw 42;
for ... entries
let sum = 0; for (let [i,v] of arr.entries()) { sum += v; } if (sum !== 499500) throw 42;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for ... .length	422569.8 Ops/sec
for ... of	1238154.4 Ops/sec
for ... .length (cached)	436043.9 Ops/sec
for ... entries	470132.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark test case, which aims to measure the performance of different approaches for iterating over an array.

The benchmark tests four variants:

1. **"for ... .length"`: This approach uses the `length` property of the array to get its length and then iterates using a traditional `for` loop.
2. **"for ... of"`: This approach uses the new `for...of` loop syntax, which allows iterating directly over an iterable (in this case, an array) without accessing its length.
3. **"for ... .length (cached)"`: This is similar to the first approach but with a slight optimization: the length is cached in a variable, reducing the number of times it needs to be accessed.
4. **"for ... entries"`: This approach uses the `entries()` method on an array to create an iterator over its key-value pairs, which can be used for iteration.

**Options Comparison**

Here's a brief comparison of the four approaches:

* **Performance**: The `for...of` loop is generally faster than the traditional `for` loop with `length` access. This is because `for...of` avoids the overhead of accessing the array's length and instead uses the iterator protocol to manage iteration.
* **Readability**: The `for...of` loop is often considered more readable and concise than the traditional `for` loop with `length` access, as it eliminates the need for a separate variable to store the length.
* **Optimization potential**: The `for... .length (cached)` approach has some optimization potential by reducing the number of times the length needs to be accessed. However, this effect is likely negligible in most cases.

**Pros and Cons**

* **Traditional `for` loop with `length` access**:
	+ Pros: easy to understand and implement
	+ Cons: slower due to accessing `length`
* **`for...of` loop**:
	+ Pros: faster, more readable, and concise
	+ Cons: requires support for the new syntax (introduced in ECMAScript 2015)
* **`for... .length (cached)` approach**:
	+ Pros: minor optimization potential
	+ Cons: adds unnecessary complexity to the loop
* **`for... entries`**:
	+ Pros: unique and potentially useful use case for iteration over arrays with key-value pairs
	+ Cons: less common and less intuitive than traditional array iteration methods

**Library and Special JS Features**

The benchmark uses a few libraries and special JavaScript features:

* No explicit library usage is shown in the provided code.
* The `for...of` loop syntax requires support for ECMAScript 2015 (ES6) or later.
* The `entries()` method on an array is available since ECMAScript 2017 (ES7).

**Other Alternatives**

If you're looking for alternative approaches to iterating over arrays, consider:

* **Using `Array.prototype.forEach()`**: This method provides a more concise and readable way to iterate over arrays without the need for explicit loop constructs.
* **Utilizing `reduce()` or `map()` methods**: These array methods can simplify iteration over arrays by providing a declarative way to process elements.

Keep in mind that these alternatives might not offer performance advantages over the benchmarked approaches, but they can make your code more concise and readable.

Related benchmarks:

forloop performance test (version: 3)

save length of the array in the variable vs get it the loop

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

Created: 2 years ago by: Registered User

Jump to the latest result

for ... .length

for ... of

for ... .length (cached)

for ... entries

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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