Benchmark: Set forEach() vs values() vs for loop

Script Preparation code:

const data = new Set
for (let i = 0; i < 1000000; i++) {
  data.add(i)
}
window.data = data

Tests:

forEach
let sum = 0 window.data.forEach((v) => { sum += v }) console.log(sum)
values
let sum = 0 const itr = window.data.values() let res = itr.next() while (!res.done) { sum += res.value res = itr.next() } console.log(sum)
for loop
let sum = 0 for (const v of window.data) { sum += v } console.log(sum)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
values
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
forEach	163.3 Ops/sec
values	248.1 Ops/sec
for loop	208.5 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark evaluates three different methods for iterating over a `Set` in JavaScript: `forEach()`, `values()`, and the traditional `for...of` loop. Here's a breakdown of each approach, along with their pros and cons, based on the provided benchmark data.

### Benchmark Methods

1. **forEach()**:
   - **Code**: 
     ```javascript
     let sum = 0;
     window.data.forEach((v) => {
         sum += v;
     });
     console.log(sum);
     ```
   - **Pros**:
     - Concise syntax and functional programming style.
     - Encourages immutability since it works with callbacks.
   - **Cons**:
     - Slower execution compared to the other two methods, as indicated by the benchmark results (122.85 executions per second).
     - May have a small overhead due to the function calls in the callback.

2. **values()**:
   - **Code**:
     ```javascript
     let sum = 0;
     const itr = window.data.values();
     let res = itr.next();
     while (!res.done) {
         sum += res.value;
         res = itr.next();
     }
     console.log(sum);
     ```
   - **Pros**:
     - Allows a more explicit control over the iteration process.
     - Can be optimized for specific use cases where you need to break or return early from the loop.
   - **Cons**:
     - Slightly more verbose due to manual iteration handling (using `next()`).
     - Performance is better than `forEach()` (235.12 executions per second), indicating that direct iterator handling is generally faster.
  
3. **for...of** loop:
   - **Code**:
     ```javascript
     let sum = 0;
     for (const v of window.data) {
         sum += v;
     }
     console.log(sum);
     ```
   - **Pros**:
     - Simple and easy to read, combining clarity with performance.
     - Performance is better than `forEach()` (209.05 executions per second) and offers similar efficiency to `values()`.
   - **Cons**:
     - Can’t break or return from the loop in the same way as manually iterating with `values()`.

### Benchmark Results

The results from the benchmark show that using `values()` is the fastest method for iterating through a `Set`, followed closely by the `for...of` loop, and lastly `forEach()`, which is the slowest. This order highlights the computational efficiency of iterators compared to the higher-level functional approach of `forEach()`.

### Considerations

**Choosing the Right Method**:
- If performance is critical, especially in larger datasets, using `values()` or `for...of` is recommended. They both have better performance characteristics.
- If code readability and maintaining a functional style are paramount, then `forEach()` can be acceptable, keeping in mind the performance trade-off.

**Alternatives**:
- Beyond these three methods, another alternative is the traditional `for` loop, which can sometimes offer performance benefits similar to `values()` and `for...of`, depending on the scenario and optimizations applied by JavaScript engines.
- In modern JavaScript, array methods like `.map()`, `.filter()`, or even leveraging frameworks/libraries for data manipulation can provide additional functional programming features but may not directly apply to `Set` iterations.

This benchmark effectively demonstrates how different JavaScript syntax and methodologies can lead to varied performance outcomes, allowing developers to make informed decisions based on their specific needs and contexts.

Related benchmarks:

Set forEach() vs values() vs for loop (version: 1)

Comparing performance of: forEach vs values vs for loop

Created: one year ago by: Guest

Jump to the latest result

forEach

values

for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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