Benchmark: set vs array iteration for,for-of and values

Script Preparation code:

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var b = new Set(a);

Tests:

array for-of
for (const x of a) {}
set for-of
for (const x of b) {}
array for
for (let i = 0; i < a.length; i++) { let x = a[i]; }
set values for-of
const v = b.values(); for (const x of v) { }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array for-of
set for-of
array for
set values for-of

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
array for-of	16439088.0 Ops/sec
set for-of	13461023.0 Ops/sec
array for	880601.5 Ops/sec
set values for-of	13471700.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark described in the provided JSON tests the performance of different iteration methods over two data structures: an array and a set. The main focus is on comparing the efficiency of `for..of` loops and traditional `for` loops when iterating over these collections.

### Benchmark Overview

1. **Data Structures**:
   - **Array**: A basic ordered collection in JavaScript, where each element can be accessed by its index.
   - **Set**: A collection of values where each value must be unique. A `Set` does not maintain any particular order and does not allow duplicate elements.

2. **Preparation Code**:
   - The benchmark prepares an array `a` containing ten integers from 1 to 10 and a `Set` `b` created from this array. 
   - This ensures that both the array and the set contain the same elements but are structured differently.

### Comparison of Test Cases

1. **Array `for-of` Loop**:
   - **Code**: `for (const x of a) {}`
   - **Description**: This is a modern JavaScript syntax that iteratively accesses each element of the array directly.
   - **Pros**: More succinct and easier to read than traditional loops; handles different types directly without needing to manage indices.
   - **Cons**: Performance can vary depending on the implementation, but in most cases, it is quite efficient.

2. **Set `for-of` Loop**:
   - **Code**: `for (const x of b) {}`
   - **Description**: Similar to the array loop, but this iterates over the unique values in the set.
   - **Pros**: Clean syntax and efficient traversal of unique values.
   - **Cons**: Iteration over a set may be slightly less performant than an array due to the internal storage and uniqueness constraints.

3. **Array Traditional `for` Loop**:
   - **Code**: `for (let i = 0; i < a.length; i++) { let x = a[i]; }`
   - **Description**: A classic loop for iterating over an array by its indices.
   - **Pros**: Highly optimized in most JavaScript engines, allowing for potential better performance in specific scenarios.
   - **Cons**: More verbose and error-prone due to index management, especially with larger data sets.

4. **Set Values `for-of` Loop**:
   - **Code**: `const v = b.values(); for (const x of v) { }`
   - **Description**: This explicitly retrieves an iterator for the values in the `Set` and then uses a `for-of` loop to iterate through them.
   - **Pros**: Can be beneficial when needing to work directly with an iterator.
   - **Cons**: Slight complexity added due to needing to call `.values()`, and may introduce more overhead in terms of performance when compared to iterating directly.

### Benchmark Results

From the latest benchmark results:
- The **array `for-of`** iteration proved to be the fastest, with about **16.4 million executions per second**.
- The **set values `for-of`** loop and the **set `for-of`** loop had similar performance benchmarks around **13.5 million executions per second**.
- The **traditional array `for`** was considerably slower, at about **880,000 executions per second**, which indicates that while it is often considered efficient, its performance here suggests possible overhead or inefficiency in that specific implementation or environment.

### Other Considerations

- **Browser Variability**: Performance can vary across different browsers and versions, as shown in the benchmark data from Chrome.
- **Use Cases**: Choosing which iteration method to use can depend on the need for simplicity (favoring `for-of`) or on specific performance requirements (possibly leaning toward traditional loops).
- **Data Structure Selection**: The choice between using an array or a set may influence the preferred iteration method based on the requirement for uniqueness in your dataset.

### Alternatives

- **`forEach` method**: An alternative for arrays that allows function-style iteration but may carry additional overhead due to the function callback.
- **`map` method**: Useful for transforming data but should be avoided if the only goal is iteration, since it returns a new array.
- **`reduce` method**: Also capable of iteration with accumulated results but often seen as less clear for simple iteration compared to `for-of`.
  
In summary, the choice of iteration technique in JavaScript can significantly affect performance and readability, so understanding trade-offs is crucial while writing efficient code.

Related benchmarks:

set vs array iteration for,for-of and values (version: 1)

Comparing performance of: array for-of vs set for-of vs array for vs set values for-of

Created: one month ago by: Guest

Jump to the latest result

array for-of

set for-of

array for

set values for-of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):