Benchmark: Performance of JavaScript .forEach, .map and .reduce vs for and for..of 2232132

Script Preparation code:

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

Tests:

.forEach
const array = generateTestArray(); array.forEach((x) => { x.r = x.a + x.b; });
for..of
const array = generateTestArray(); for(const x of array) { x.r = x.a + x.b; }
for..of (destructuring)
const array = generateTestArray(); const r = []; for(const {a, b} of array) { r.push(a + b); }
.map
const array = generateTestArray(); array.map(x => x.a + x.b)
.map (destructuring)
const array = generateTestArray(); array.map(({a,b}) => a + b)
.for (init array)
const array = generateTestArray(); const r = new Array(array.length); for (let i = 0; i < array.length; ++i) { r[i] = array[i].a + array[i].b; }
.reduce
const array = generateTestArray(); array.reduce((p, x) => p + x.a + x.b, 0);
.reduce (destructuring)
const array = generateTestArray(); array.reduce((p, {a,b}) => p + a + b, 0);
for..of (reduce)
const array = generateTestArray(); let r = 0; for (const x of array) { r += x.a + x.b; }
for..of (reduce) (destructuring)
const array = generateTestArray(); 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
.forEach	42.3 Ops/sec
for..of	48.3 Ops/sec
for..of (destructuring)	39.1 Ops/sec
.map	36.9 Ops/sec
.map (destructuring)	38.9 Ops/sec
.for (init array)	75.3 Ops/sec
.reduce	55.1 Ops/sec
.reduce (destructuring)	54.4 Ops/sec
for..of (reduce)	48.8 Ops/sec
for..of (reduce) (destructuring)	47.9 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON focuses on comparing the performance of different JavaScript methods for iterating over an array and performing operations on the elements. Specifically, the benchmark includes iterations using various constructs such as `.forEach()`, `.map()`, `.reduce()`, and traditional loops (`for` and `for..of`), as well as utilizing destructuring assignment.

### Options Compared

1. **`.forEach()`**
   - **Pros**: 
     - Simplicity and readability; it is clear and descriptive.
   - **Cons**: 
     - Does not return a value, making it less flexible if you require a result (e.g., transformed or computed array).
 
2. **`for..of`**
   - **Pros**: 
     - More control over iterations, and easier to perform operations that modify the original array.
   - **Cons**: 
     - Generally slower than methods that use built-in methods in JavaScript engines.

3. **`for..of (destructuring)`**
   - **Pros**: 
     - Enhances readability and conciseness by pulling out properties directly.
   - **Cons**: 
     - Can add a slight overhead due to destructuring syntax compared to a standard `for..of`.

4. **`.map()`**
   - **Pros**: 
     - Intuitively expresses the intent of mapping values; also returns a new array.
   - **Cons**: 
     - Can be less performant for large arrays compared to direct iteration approaches.

5. **`.map (destructuring)`**
   - **Pros**: 
     - Readable and allows direct access to properties.
   - **Cons**: 
     - Similar to `.map()`, this can have performance implications due to destructuring.

6. **`for (init array)`**
   - **Pros**: 
     - Generally the fastest and most memory-efficient approach, as it doesn’t incur the overhead of method calls.
   - **Cons**: 
     - Slightly more verbose.

7. **`.reduce()`**
   - **Pros**: 
     - Very powerful for reducing arrays into a single value. 
   - **Cons**: 
     - Requires more understanding of functional programming concepts, can be overused for simple operations.

8. **`.reduce (destructuring)`**
   - **Pros**: 
     - Convenient access to properties within the accumulator function.
   - **Cons**: 
     - Similar to `.reduce()`, it may have performance drawbacks against basic loops for simple tasks.

9. **`for..of (reduce)`**
   - **Pros**: 
     - Maintains clarity when performing summation or aggregation without needing an additional call to `.reduce()`.
   - **Cons**: 
     - May be slower than directly appending with an accumulator due to loop overhead.

10. **`for..of (reduce) (destructuring)`**
    - **Pros**: 
      - Keeps the code clean while summarizing values.
    - **Cons**: 
      - Performance can lag behind simpler loop iterations.

### Performance Results Analysis
The benchmark results indicate various execution speeds for each method, revealing that the traditional `for` loop (specifically "for (init array)") performed the fastest, followed by `.reduce()`, `for..of`, and other methods like `.forEach()` and `.map()`. This demonstrates that while higher-level abstractions provide ease and readability, they often come with performance trade-offs.

### Other Considerations
- **Code Readability vs. Performance**: Higher-order functions make code more readable and expressive, while traditional loops are often faster.
- **Use Cases**: Depending on the situation, choose the method that balances performance with code clarity. For example:
  - Use `.map()` when you need to transform data.
  - Use `.forEach()` when you need to perform side effects without caring about the return value.
  - Use `for` when performance is crucial.

### Alternatives
- **Array Methods**: Alternatives like `Array.prototype.filter()`, `find()`, and even more advanced utilities from libraries such as Lodash can also create concise and expressive solutions, although they may incur additional performance costs due to their higher-level nature.
- **Typed Arrays and Web Assembly**: For computations that require heavy numerical calculations or high performance, consider using Typed Arrays or Web Assembly to boost speed while maintaining JavaScript's usability.

In summary, choice of array iteration technique should be guided by a balance of readability, maintainability, and performance needs, aligning with the specific requirements of the task at hand.

Related benchmarks:

Performance of JavaScript .forEach, .map and .reduce vs for and for..of 2232132 (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: Guest

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