Benchmark: reverse for vs for of

Script Preparation code:

var detail = {id: 1, description: 'asdf'}
var array = '.'.repeat(10000).split('').map(item => detail)

var control1 = 0
var control2 = 0

Tests:

reverse for
for (let idx = array.length - 1; idx >= 0; idx--) { control1++ }
for of
for (let detail of array) { control2++ }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reverse for
for of

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/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
reverse for	369.7 Ops/sec
for of	318.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark compares two approaches for iterating over an array in reverse order: traditional `for` loops with index decrement (`reverse for`) and using the `for...of` loop with an iterator (`for of`). The goal is to determine which approach is faster.

**Script Preparation Code**

Before running the benchmarks, the script preparation code creates a detailed object (`detail`) and an array of 10,000 elements by repeating dots (`.`) and mapping the `detail` object over the resulting array. Two variables, `control1` and `control2`, are initialized to keep track of the number of iterations.

**Individual Test Cases**

There are two test cases:

1. **Reverse For**: This test case uses a traditional `for` loop with index decrement (`idx--`) to iterate over the array in reverse order.
```javascript
for (let idx = array.length - 1; idx >= 0; idx--) {
  control1++;
}
```
This approach is straightforward but can be slow due to the overhead of incrementing the index variable.

2. **For Of**: This test case uses the `for...of` loop with an iterator to iterate over the array in reverse order.
```javascript
for (let detail of array) {
  control2++;
}
```
This approach is more concise and potentially faster, as it avoids the overhead of explicit index management.

**Library: None**

There are no external libraries used in this benchmark. The script preparation code uses only built-in JavaScript features.

**Special JS Features/Syntax: For Of Loop**

The `for...of` loop is a relatively new feature introduced in ECMAScript 2015 (ES6). It provides a concise way to iterate over arrays and other iterable objects, eliminating the need for explicit index management. The syntax is simple: `for (const [iteratorValue] of array) { /* code */ }`. In this benchmark, the `for...of` loop is used with an iterator created by mapping the `detail` object over the array.

**Pros and Cons**

**Reverse For**

Pros:

* Easy to understand and implement
* Can be useful for iterating over arrays with complex indexing logic

Cons:

* Can be slow due to index increment overhead
* Requires explicit management of indices, which can lead to errors if not done correctly

**For Of**

Pros:

* Concise and easy to read
* Eliminates the need for explicit index management
* Potential for better performance due to reduced overhead

Cons:

* Less flexible than traditional `for` loops (no direct access to index or array length)
* May require additional setup for use with certain libraries or frameworks

**Other Alternatives**

If you want to explore other approaches, consider the following alternatives:

1. **Array.prototype.reverse()**: This method reverses the order of elements in an array and returns the reversed array. It can be used as a simple alternative to `for` loops.
```javascript
var reversedArray = array.slice().reverse();
```
2. **Using `forEach()` with a callback function**: While not ideal for iterating over arrays in reverse order, `forEach()` can be used with a callback function to iterate over an array and execute code for each element.
```javascript
array.forEach((element) => {
  // code here
});
```
3. **Using `map()` or `reduce()` with index management**: These methods can be used to transform arrays by applying functions to each element, including managing indices.

Keep in mind that these alternatives may not offer the same level of performance as the `for...of` loop or traditional `for` loops, especially for large datasets.

Related benchmarks:

reverse for vs for of (version: 0)

Comparing performance of: reverse for vs for of

Created: 2 years ago by: Guest

Jump to the latest result

reverse for

for of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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