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

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) { let z = x; }
set for-of
for (const x of b) { let z = x; }
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) { let z = x }

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	16424402.0 Ops/sec
set for-of	13196301.0 Ops/sec
array for	873078.4 Ops/sec
set values for-of	13438799.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined here compares different iteration methods for iterating over an array and a Set in JavaScript. The testing framework utilizes a variety of iteration techniques to scrutinize their performance characteristics. Below is a detailed breakdown of the various test cases, their pros and cons, and other relevant considerations.

### Overview of Iteration Techniques Tested

1. **Array for-of loop**
   - **Benchmark Definition**: `for (const x of a) { let z = x; }`
   - **Test Name**: "array for-of"
   - **Description**: This version uses the `for-of` construct to iterate through the array `a`. It allows you to directly access the elements of the array in a cleaner syntax compared to the traditional `for` loop.

2. **Set for-of loop**
   - **Benchmark Definition**: `for (const x of b) { let z = x; }`
   - **Test Name**: "set for-of"
   - **Description**: Similar to the array iteration, this uses `for-of` to iterate over the `Set`. The iteration maintains the insertion order of the elements.

3. **Array traditional for loop**
   - **Benchmark Definition**: `for (let i = 0; i < a.length; i++) { let x = a[i]; }`
   - **Test Name**: "array for"
   - **Description**: The traditional index-based iteration method using `for`. This method requires managing the loop variable manually.

4. **Set values for-of loop**
   - **Benchmark Definition**: `const v = b.values(); for (const x of v) { let z = x }`
   - **Test Name**: "set values for-of"
   - **Description**: Here, the `values()` method of `Set` is used to obtain an iterator for the values in `Set`, which is then iterated using `for-of`.

### Performance Results

The benchmark results indicate the number of executions per second for each iteration method. The `array for-of` and `set values for-of` approaches showed the highest performance, indicating a preference for modern JavaScript iteration styles. The traditional `for` loop on the array was significantly slower, reflecting its higher overhead due to manual index handling.

### Pros and Cons of Each Approach

#### 1. Array for-of
- **Pros**: 
  - Clean and easy to read. 
  - Benefits from automatic iteration over the collection.
- **Cons**:
  - May be slightly slower than indexed `for` loops in some cases but often negligible.

#### 2. Set for-of
- **Pros**: 
  - Simple syntax similar to array iteration.
  - Preserves element insertion order.
- **Cons**:
  - Performance might slightly vary depending on the JavaScript engine implementation of `Set`.

#### 3. Traditional Array for loop
- **Pros**: 
  - Offers the highest level of control over iteration (e.g., modifying loop variables).
  - Can be more performant in specific scenarios, particularly older engines.
- **Cons**:
  - More verbose and harder to read.
  - Requires more boilerplate and management of loop counters.

#### 4. Set values for-of
- **Pros**: 
  - Matches the `for-of` syntax familiar from array iterations.
  - Explicitly calls out the use of `Set` and its values.
- **Cons**: 
  - May be less intuitive for beginners, requiring abstraction of method calls.

### Other Considerations

- **JavaScript Engine Differences**: Performance can vary across different JavaScript engines (e.g., V8 in Chrome vs. SpiderMonkey in Firefox). This can lead to different practical outcomes in specific scenarios.
- **Data Structure Choice**: Choosing between an array and a Set depends on the use case. Sets do not allow duplicate values and might provide better performance for membership tests and unique collections.
- **Compatibility**: `for-of` is part of ES6 (2015), thus may not be available in older JavaScript environments. However, it is broadly supported in modern environments.

### Alternatives

In addition to the approaches tested, some other alternatives for iteration could include:

- **Array `forEach` method**: This method allows you to execute a function once for each array element but does not return values or permit breaks.
- **Reduce**: While not an iteration method in the traditional sense, `reduce` can be used creatively to traverse arrays and accumulate values, though it may not be as performant for simple iteration tasks.
- **While/Do-While Loops**: These may also be employed, though they are less common for simple array iterations.

By understanding these iteration methods and their performance implications, engineers can make more informed decisions based on their application’s requirements and identifier type of data structure they are working with.

Related benchmarks:

set vs array iteration for,for-of and values v2 (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):