Benchmark: Performance of JavaScript .reduce vs. for vs. for..of

Script Preparation code:

const array = [];
for (let i = 0; i < 1000000; ++i) {
    result.push({
        a: i,
        b: i / 2,
    });
}

Tests:

for
const r = 0; for (let i = 0; i < array.length; ++i) { r += array[i].a + array[i].b; }
.reduce
array.reduce((p, x) => p + x.a + x.b, 0);
.reduce (destructuring)
array.reduce((p, {a,b}) => p + a + b, 0);
for..of (reduce)
let r = 0; for (const x of array) { r += x.a + x.b; }
for..of (reduce) (destructuring)
let r = 0; for (const {a,b} of array) { r += a + b; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
.reduce
.reduce (destructuring)
for..of (reduce)
for..of (reduce) (destructuring)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 19 days ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for	183367248.0 Ops/sec
.reduce	53378000.0 Ops/sec
.reduce (destructuring)	61994520.0 Ops/sec
for..of (reduce)	180358480.0 Ops/sec
for..of (reduce) (destructuring)	60718912.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):

LLMs can make mistakes. Check important info.

The benchmark you provided compares the performance of different methods for summing properties of objects within an array in JavaScript. The key methodologies tested in this benchmark are:

1. **For Loop (`for`)**
2. **Array's `reduce` Method (`.reduce`)**
3. **Destructured `reduce` Method (`.reduce (destructuring)`)**
4. **For-Of Loop (`for..of`)**
5. **Destructured For-Of Loop (`for..of (destructuring)`)**

### Test Cases Explained

1. **For Loop:**
   ```javascript
   const r = 0;
   for (let i = 0; i < array.length; ++i) {
       r += array[i].a + array[i].b;
   }
   ```
   - **Pros:** This is a traditional way of iterating over arrays; it's straightforward and allows for fine control over the index. It can be faster in some cases due to less overhead.
   - **Cons:** Verbose; requires manual index management which can lead to errors.

2. **Array's `reduce` Method:**
   ```javascript
   array.reduce((p, x) => p + x.a + x.b, 0);
   ```
   - **Pros:** Functional approach; builds on the built-in method, which may be more readable and concise. Great for chaining with other functional array methods.
   - **Cons:** Could have performance overhead due to the function call for each element and the creation of new scope.

3. **Destructured `reduce` Method:**
   ```javascript
   array.reduce((p, {a,b}) => p + a + b, 0);
   ```
   - **Pros:** More readable as it clearly indicates which properties are being used. Still utilizes the benefits of functional programming.
   - **Cons:** As with the standard `reduce`, can incur performance hits due to destructuring and function calls.

4. **For-Of Loop:**
   ```javascript
   let r = 0;
   for (const x of array) {
       r += x.a + x.b;
   }
   ```
   - **Pros:** Cleaner and more concise than the traditional for loop. Avoids the complexity of index management while improving readability.
   - **Cons:** In some cases, it might be slightly slower than traditional for loops due to the iterator protocol overhead.

5. **Destructured For-Of Loop:**
   ```javascript
   let r = 0;
   for (const {a,b} of array) {
       r += a + b;
   }
   ```
   - **Pros:** Provides clarity and reduces boilerplate, as destructuring makes it easy to access properties directly. It combines the readability of for-of loops with the simplicity of destructuring.
   - **Cons:** Similar to for-of, it may introduce performance overhead due to destructuring.

### Performance Results

Based on the latest benchmark results, the measurements of executions-per-second for each test case highlight the following observations:

- **Top Performer:** The **for..of (reduce)** loop has the highest execution rate (about 170 million executions per second), indicating good efficiency.
- **Second Place:** The standard **for..of (destructuring)** loop is slightly behind but still performs very well.
- **Traditional For Loop and Reduce:** The traditional for loop also performs competitively but is outperformed by various for-of executions. The `.reduce` methods tend to score lower, likely due to the overhead of function invocations.

### Other Considerations

- **Readability vs. Performance:** Choosing between these methods often involves a trade-off between readability and performance, particularly in JavaScript’s context where readability is a significant concern.
- **Legacy Support:** Considerations of browser compatibility for older environments may influence the choice between ES6 features (like `for..of`) and traditional loops.
- **Use Cases:** If performance is critical and dealing with large datasets, a traditional for loop may be warranted. Conversely, in applications where development speed and maintainability are critical, newer syntax and methods like `reduce` or `for..of` may be preferred.

### Alternatives

Other methods for similar tasks could include:

- **Array Methods:** Other higher-order functions like `.map()` or `.filter()` followed by reducing could yield more complex processing pipelines.
- **Libraries:** Using utility libraries like Lodash can provide optimized functions for common operations but may introduce additional overhead compared to native JavaScript solutions.
- **Typed Arrays:** If you're working with numerical data and performance is paramount, consider using typed arrays in JavaScript, which provide a way to manage large arrays of numerical data more efficiently.

In essence, the choice of which approach to use should account for specific project needs, data types, and performance requirements.

Related benchmarks:

Performance of JavaScript .reduce vs. for vs. for..of (version: 1)

Comparing performance of: for vs .reduce vs .reduce (destructuring) vs for..of (reduce) vs for..of (reduce) (destructuring)

Created: 5 months ago by: Registered User

Jump to the latest result

for

.reduce

.reduce (destructuring)

for..of (reduce)

for..of (reduce) (destructuring)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):