Benchmark: Iterate-Set4 - MeasureThat.net

Script Preparation code:

var fewItemSet = new Set([1, 2, 3]);
var manyItemSet = new Set(Array.from({ length: 1000 }, (_, i) => i));

Tests:

for of: few items
let result = 0; for (const item of fewItemSet) { result += item; }
for of: many items
let result = 0; for (const item of manyItemSet) { result += item; }
forEach: few items
let result = 0; fewItemSet.forEach((item) => { result += item })
forEach: many items
let result = 0; manyItemSet.forEach((item) => { result += item })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for of: few items
for of: many items
forEach: few items
forEach: many items

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for of: few items	10408701.0 Ops/sec
for of: many items	163403.8 Ops/sec
forEach: few items	9856747.0 Ops/sec
forEach: many items	135463.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance of iterating over a JavaScript `Set` data structure using two different methods: `for...of` loops and the `forEach` method. The benchmark compares these methods with a small set of items (three elements: 1, 2, and 3) versus a large set of items (1,000 elements).

### Comparison of Iteration Methods

1. **for...of Loop**:
   - **Description**: This is a modern JavaScript construct that allows for easy iteration over iterable objects, including `Set`, `Array`, `Map`, and more. The loop retrieves each item directly.
   - **Pros**:
     - Simple syntax that is easy to read and write.
     - Works seamlessly with any iterable structure.
     - Can be more performant in certain scenarios, especially with larger data structures.
   - **Cons**:
     - Slightly less flexible compared to methods that accept a function (like `forEach`), as it does not allow for a callback mechanism.

2. **forEach Method**:
   - **Description**: This method executes a provided function once for each element in the `Set`, in insertion order. It takes a callback function that defines what to do with each item.
   - **Pros**:
     - Provides a functional approach to iteration which may integrate better with certain functional programming concepts.
     - Allows for passing this keyword for context within the callback, making it versatile.
   - **Cons**:
     - Slightly less performant than `for...of` for very large datasets, as it involves a function call for each element.
     - Does not support breaking out of the iteration, as you cannot use a `break` statement within the callback.

### Benchmarked Cases
- **Small Set (fewItemSet)**:
  - `for...of: few items`: 20,548,202 executions per second
  - `forEach: few items`: 24,452,686 executions per second
  - Observations indicate that `forEach` outperforms `for...of` for small datasets.

- **Large Set (manyItemSet)**:
  - `for...of: many items`: 145,508.765625 executions per second
  - `forEach: many items`: 236,373.609375 executions per second
  - For larger datasets, `forEach` continues to outpace `for...of`, but execution speeds for both methods significantly decline.

### General Considerations
When choosing between `for...of` and `forEach`, developers should consider the following:
- **Data Size**: For smaller sets, the difference in execution time may not be crucial. In larger datasets, `forEach` may still show better performance but could vary based on the operation performed in the callback.
- **Use Case**: If you need the ability to break out of loops, prefer `for...of`. However, for more functional style or when needing context for `this`, choose `forEach`.
- **Browser Compatibility**: Both methods are widely supported in modern browsers, so compatibility is generally not a major concern.

### Alternatives
Beyond the provided options, alternatives for iteration in JavaScript include:
- **Traditional `for` Loop**: Offers maximum control over iterations but requires manual indexing.
- **`map` Method**: Useful for transforming arrays and can also be utilized with sets, though it may often be less clear for simple iterations.
- **`reduce` Method**: Allows grouping and reducing arrays to a single value, suitable for aggregating data during iteration.
- **`for...in` Loop**: Primarily intended for objects and not recommended for sets.

### Conclusion
This benchmark serves as an insightful comparison of two common iteration patterns in JavaScript with regards to performance, allowing developers to make informed decisions based on the context of their applications and data sizes. As with many performance benchmarks, profiling in the specific use case is advisable to guide decisions effectively.

Related benchmarks:

Iterate-Set4 (version: 1)

Iterate over a set.

Comparing performance of: for of: few items vs for of: many items vs forEach: few items vs forEach: many items

Created: one month ago by: Guest

Jump to the latest result

for of: few items

for of: many items

forEach: few items

forEach: many items

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):