Benchmark: Performance of JavaScript .loops

Script Preparation code:

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

Tests:

.forEach
array.forEach((x) => { x.r = x.a + x.b; });
for..of
for(const x of array) { x.r = x.a + x.b; }
for..of (destructuring)
const r = []; for(const {a, b} of array) { r.push(a + b); }
.map
array.map(x => x.a + x.b)
.map (destructuring)
array.map(({a,b}) => a + b)
.for (init array)
const r = new Array(array.length); for (let i = 0; i < array.length; ++i) { r[i] = 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
.forEach
for..of
for..of (destructuring)
.map
.map (destructuring)
.for (init array)
.reduce
.reduce (destructuring)
for..of (reduce)
for..of (reduce) (destructuring)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
.forEach	41316172.0 Ops/sec
for..of	62540452.0 Ops/sec
for..of (destructuring)	63171200.0 Ops/sec
.map	36072416.0 Ops/sec
.map (destructuring)	35287688.0 Ops/sec
.for (init array)	56116088.0 Ops/sec
.reduce	49730352.0 Ops/sec
.reduce (destructuring)	54160524.0 Ops/sec
for..of (reduce)	63571516.0 Ops/sec
for..of (reduce) (destructuring)	63874252.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined on MeasureThat.net evaluates the performance of various methods and iterations for manipulating and processing arrays in JavaScript, specifically focusing on techniques for summing properties of objects within an array. The benchmark prepares a large array of objects (1,000,000 in total), each containing properties `a`, `b`, and `r`.

### Tested Options

The benchmark includes different approaches to iterate over the array and calculate the sum of properties `a` and `b`:

1. **.forEach**: Uses the `forEach` method to apply a function on each element of the array. It modifies the property `r` of each object in the array.
   - *Pros*: Very readable and simple syntax, easy to understand.
   - *Cons*: Generally slower than for-loops because of function calls.

2. **for..of**: Utilizes the `for..of` loop to iterate over the array.
   - *Pros*: Clean syntax, avoids function call overhead.
   - *Cons*: Slightly less readable for complex operations compared to higher-order functions.

3. **for..of (destructuring)**: Similar to the standard `for..of`, but uses destructuring to directly access properties `a` and `b`.
   - *Pros*: Reduces verbosity, improves clarity while minimizing access time to properties.
   - *Cons*: Similar performance as non-destructuring but with added clarity.

4. **.map**: Applies the `map` function to transform the array, returning a new array composed of the sums of `a` and `b`.
   - *Pros*: Functional programming approach, concise.
   - *Cons*: Creates a new array and potentially increases memory usage, which may have performance implications.

5. **.map (destructuring)**: Uses `map` with destructuring to simplify access to properties.
   - *Pros*: Cleaner code, reduces repetitive access syntax.
   - *Cons*: Same memory implications as standard `map`.

6. **.for (init array)**: A standard `for` loop with pre-initialized results. It explicitly initializes an array for storing results.
   - *Pros*: Highly efficient for performance-critical applications.
   - *Cons*: More verbose code, might be seen as less elegant.

7. **.reduce**: The `reduce` method is employed to accumulate values, summing `a` and `b` while iterating.
   - *Pros*: Powerful functional approach, can handle complex accumulations and transformations.
   - *Cons*: Can be less intuitive, especially for newcomers; introduced overhead of function calls.

8. **.reduce (destructuring)**: Similar to regular `reduce`, utilizing destructuring for clarity.
   - *Pros*: Improved readability while maintaining encapsulation of logic.
   - *Cons*: Function call overhead applies.

9. **for..of (reduce)**: A `for..of` loop that mimics the functionality of `reduce`.
   - *Pros*: Straightforward logic without functional overhead.
   - *Cons*: More code than a simple `reduce`, can be less elegant.

10. **for..of (reduce) (destructuring)**: Combines the `for..of` loop with destructuring for clarity in summation.
    - *Pros*: Maintains the benefits of both `for..of` and destructuring, offering both clarity and efficiency.
    - *Cons*: Somewhat more complex due to the inclusion of destructuring.

### Performance Results

The latest benchmark results indicate that the top-performing methods were the `for..of` loops, especially when destructuring was used. Here are some performance insights:

- **Top performers**: 
  - `for..of (reduce) (destructuring)`
  - `for..of (reduce)`
  - `for..of (destructuring)`

All these approaches showcased superior execution rates compared to methods like `.forEach`, `.map`, and even `.reduce` without destructuring, demonstrating the efficiency of iteration and its direct influence on performance.

### Considerations

When selecting an approach:
- **Readability vs. Performance**: Higher-order functions (like `.map`, `.forEach`) tend to provide cleaner code, which can be more maintainable. However, in performance-critical applications, traditional loops (like `for` or `for..of`) may yield better results.
- **Memory Usage**: Methods that create new arrays (like `map`) can introduce additional memory overhead, thus affecting performance.
- **Developer Familiarity**: Certain syntactic approaches may be preferred based on team familiarity with functional programming paradigms.

### Alternatives

In addition to the tested approaches, developers can also consider:
- **`Array.prototype.filter`** for operations that involve conditional logic for inclusion in new arrays.
- **`Array.prototype.flatMap`** for cases that require mapping and flattening of arrays simultaneously.
- Using modern libraries like **Lodash** or **Ramda** for functional programming utilities, which offer optimized methods for data manipulation but may add additional bundle size.

Overall, the choice of technique should balance performance needs against code maintainability and readability in the context of the application's requirements.

Related benchmarks:

Performance of JavaScript .loops (version: 1)

Comparing performance of: .forEach vs for..of vs for..of (destructuring) vs .map vs .map (destructuring) vs .for (init array) vs .reduce vs .reduce (destructuring) vs for..of (reduce) vs for..of (reduce) (destructuring)

Created: 2 months ago by: Registered User

Jump to the latest result

.forEach

for..of

for..of (destructuring)

.map

.map (destructuring)

.for (init array)

.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 2 months ago):