Benchmark: for i vs for of entries

Script Preparation code:

var array = [...Array.from({length: 1_000}).keys()]

Tests:

For i
let count = 0; for (let i = 0; i < array.length; i += 1) { count += 1; } console.log(count);
for of entries
let count = 0; for (const [index, item] of array.entries()) { count += 1; } console.log(count);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For i
for of entries

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
For i	23052.6 Ops/sec
for of entries	124262.8 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 provided benchmarking data and explain what's being tested.

**Benchmark Definition**

The benchmark defines two test cases:

1. **"for i vs for of entries"**: This test case compares the performance of using traditional `for` loops (`i`) versus iterating over an array's entries using the `for...of` loop syntax.
2. **Script Preparation Code**: The script prepares a large array with 10,000 elements using the spread operator (`[...Array.from({length: 1_000}).keys()]`).
3. **Html Preparation Code**: There is no HTML preparation code provided.

**Test Cases**

The two test cases are:

### For i

```javascript
let count = 0;
for (let i = 0; i < array.length; i += 1) {
  count += 1;
}
console.log(count);
```

This test case uses a traditional `for` loop to iterate over the array, incrementing a counter variable (`count`) for each iteration.

### For of entries

```javascript
let count = 0;
for (const [index, item] of array.entries()) {
  count += 1;
}
console.log(count);
```

This test case uses the `for...of` loop syntax to iterate over the array's entries. The `entries()` method returns an iterator that yields arrays with two elements: the index and the value at that index.

**Comparison**

The benchmark compares the performance of these two approaches:

* Traditional `for` loop (`i`)
* Iterating over array entries using `for...of`

**Pros and Cons**

**Traditional `for` Loop (`i`):**

Pros:

* Well-established, widely supported syntax
* Easy to understand and maintain

Cons:

* Can be slower due to the overhead of updating an index variable (`i`) for each iteration
* May require more manual memory management (e.g., managing the array's length)

**Iterating over Array Entries using `for...of`**

Pros:

* More concise and expressive syntax
* Reduced overhead compared to traditional loops, as it avoids manual indexing

Cons:

* Requires understanding of the iterator protocol and its nuances
* May be less familiar to developers without prior experience with JavaScript iteration

**Library/Functionality Used:**

* `Array.entries()`: a built-in method that returns an iterator over an array's entries.
* Spread operator (`[...Array.from({length: 1_000}).keys()]`): used to create the large array.

**Special JS Feature/Syntax:**

* The `for...of` loop syntax is a relatively recent addition to JavaScript (introduced in ECMAScript 2015). It's part of the ECMAScript 6 (ES6) standard and has been widely adopted since then.
* The spread operator (`[...]`) is also a relatively new feature introduced in ES6.

**Alternatives:**

Other alternatives for iterating over arrays include:

* `forEach()`: a method that executes a callback function once for each element in the array
* `map()`, `filter()`, and other array methods, which can be used to transform or filter arrays while iterating

Keep in mind that these alternatives may have different performance characteristics, syntax complexities, and use cases compared to traditional loops and the `for...of` loop.

Related benchmarks:

for i vs for of entries (version: 0)

Comparing performance of: For i vs for of entries

Created: one year ago by: Guest

Jump to the latest result

For i

for of entries

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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