Benchmark: TestLoop - MeasureThat.net

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:

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
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: 3 months 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 (destructuring)	54.3 Ops/sec
.map	48.5 Ops/sec
.map (destructuring)	51.9 Ops/sec
.for (init array)	101.7 Ops/sec
.reduce	77.7 Ops/sec
.reduce (destructuring)	71.7 Ops/sec
for..of (reduce)	76.6 Ops/sec
for..of (reduce) (destructuring)	71.9 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark tests various methods of processing an array of objects in JavaScript, focusing on how efficiently different approaches can sum up certain properties from the objects. Below, I'll break down the test cases, comparing different options and discussing their pros and cons.

### Benchmark Options:

1. **for..of (destructuring)**:
   ```javascript
   const array = generateTestArray();
   const r = [];
   for(const {a, b} of array) {
       r.push(a + b);
   }
   ```
   - **Pros**: The destructuring syntax makes the code cleaner, directly accessing the properties `a` and `b`.
   - **Cons**: The performance might be slower compared to other approaches due to the overhead of destructuring and pushing to an array.

2. **.map**:
   ```javascript
   const array = generateTestArray();
   array.map(x => x.a + x.b);
   ```
   - **Pros**: Uses a functional programming style that is higher-level and tends to be more readable. 
   - **Cons**: May have performance overhead due to creating a new array (though it could be optimized by some engines).

3. **.map (destructuring)**:
   ```javascript
   const array = generateTestArray();
   array.map(({a, b}) => a + b);
   ```
   - **Pros**: Similar to `.map`, but with destructuring for cleaner syntax.
   - **Cons**: Likely to have performance costs due to destructuring overhead.

4. **.for (init array)**:
   ```javascript
   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;
   }
   ```
   - **Pros**: This traditional loop minimizes the overhead associated with method calls, array creation, and destructuring; it also initializes the result array to the necessary length upfront.
   - **Cons**: Slightly less syntactically elegant than using `.map`.

5. **.reduce**:
   ```javascript
   const array = generateTestArray();
   array.reduce((p, x) => p + x.a + x.b, 0);
   ```
   - **Pros**: A functional approach that accumulates the sum in a single pass. It allows for concise expression of reduction.
   - **Cons**: Complexity may increase as it requires understanding of how reduce works. Also, there might be performance concerns with large arrays.

6. **.reduce (destructuring)**:
   ```javascript
   const array = generateTestArray();
   array.reduce((p, {a, b}) => p + a + b, 0);
   ```
   - **Pros**: Cleaner syntax through destructuring.
   - **Cons**: Uses destructuring, which might add some performance overhead.

7. **for..of (reduce)**:
   ```javascript
   const array = generateTestArray();
   let r = 0;
   for (const x of array) {
       r += x.a + x.b;
   }
   ```
   - **Pros**: Results in a straightforward summation, typically high performance due to direct iteration.
   - **Cons**: Lacks the declarative style of functional programming.

8. **for..of (reduce) (destructuring)**:
   ```javascript
   const array = generateTestArray();
   let r = 0;
   for (const {a, b} of array) {
       r += a + b;
   }
   ```
   - **Pros**: Clarity and conciseness from destructuring, while still potentially retaining performance levels of traditional for loops.
   - **Cons**: Same as above, with the added overhead of destructuring.

### Performance Results:
The performance is measured in executions per second, reflecting how many times the benchmark can run in that time frame. Based on the results provided:
- **The fastest approach** was ".for (init array)", followed by various forms of `.reduce`.
- **The functional approaches** like `.map` and `.reduce` lagged behind in raw performance, suggesting they may have more overhead.

### Alternatives:
Other alternatives to consider for summing up properties from arrays include:
- **Using `forEach`**: Similar to `.map` but does not return a new array.
- **External libraries like Lodash**: They offer utility functions which can simplify such operations but could introduce overhead.
- **Web Assembly**: For performance-critical applications, using languages compiled to WebAssembly can optimize such operations, though it adds complexity.

### Conclusion:
This benchmark illustrates the trade-offs between different JavaScript array processing methods. While the fastest methods are lower-level `for` loops, functional programming constructs like `.map` and `.reduce` offer better readability and maintainability, albeit with some performance cost. Developers often choose the balance between performance and clarity based on the specific needs of their applications.

Related benchmarks:

TestLoop (version: 1)

Comparing performance of: 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: 3 months ago by: Guest

Jump to the latest result

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