Benchmark: test reduce vs flatMap

Script Preparation code:

window.providerMenuItems = Object.fromEntries(
  Array.from({ length: 1000 }).map((_, id) => [id, { id }]),
);
window.subtreeDishes = new Array(1000).fill(null).map((_, index) => ({
  id: index,
  child_ids: Array.from({ length: 10 }).map(() => Math.floor(Math.random() * 2000)),
}));

Tests:

reduce
subtreeDishes.reduce((res, dish) => { dish.child_ids.forEach((childId) => { if (providerMenuItems[childId]) { res.push(providerMenuItems[childId]); } }); return res; }, []);
flatMap + filter
subtreeDishes .flatMap((dish) => dish.child_ids.map((itemId) => providerMenuItems[itemId])) .filter((val) => val != null);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
flatMap + filter

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, along with the pros and cons of different approaches.

**Benchmark Overview**

The provided benchmark measures the performance difference between two approaches for flattening an array of objects:

1. `reduce()`
2. `flatMap()` + `filter()`

**Script Preparation Code**

The script preparation code creates a sample dataset `subtreeDishes` with 1000 dishes, each having 10 child IDs. The `providerMenuItems` object is created with 1000 entries, where each entry corresponds to one of the child IDs.

```javascript
window.providerMenuItems = Object.fromEntries(Array.from({ length: 1000 }).map((_, id) => [id, { id }]));
window.subtreeDishes = new Array(1000).fill(null).map((_, index) => ({
  id: index,
  child_ids: Array.from({ length: 10 }).map(() => Math.floor(Math.random() * 2000)),
}));
```

**Benchmark Definitions**

The benchmark definitions are provided as JSON arrays, each containing a single test case. The first test case uses the `reduce()` method, while the second test case uses a combination of `flatMap()` and `filter()` methods.

```javascript
[
  {
    "Benchmark Definition": "subtreeDishes.reduce((res, dish) => {\r\n  dish.child_ids.forEach((childId) => {\r\n    if (providerMenuItems[childId]) {\r\n      res.push(providerMenuItems[childId]);\r\n    }\r\n  });\r\n  return res;\r\n}, []);"
  },
  {
    "Benchmark Definition": "subtreeDishes\r\n  .flatMap((dish) => dish.child_ids.map((itemId) => providerMenuItems[itemId]))\r\n  .filter((val) => val != null);"
  }
]
```

**Problems with the current implementation**

The `reduce()` method can be slow because it requires iterating over each element in the array and accumulating the results.

On the other hand, `flatMap()` is a more efficient method that flattens an array of arrays into a single array. However, it can lead to slower performance if not optimized correctly (e.g., using `filter()` after `flatMap()`).

**Alternatives**

There are alternative approaches to achieve similar results:

1. **Array.prototype.flatMap()**: This method is similar to the `flatMap()` method but doesn't return an array. Instead, it returns a new iterable object.
2. **Array.prototype.map() + Array.prototype.concat()**: This approach involves mapping each element in the `child_ids` array and then concatenating the resulting arrays using `concat()`.
3. **Array.prototype.forEach() + Array.prototype.push()**: This approach involves iterating over each element in the `child_ids` array, pushing each matching value into a new array.

**Performance Considerations**

The performance difference between these approaches depends on the specific use case and the size of the input data.

*   `reduce()` is generally slower than `flatMap()` because it requires more memory allocations and function calls.
*   `flatMap()` + `filter()` can be faster than `reduce()` but may lead to slower performance if not optimized correctly (e.g., using a large number of filters).
*   Using `forEach()` and `push()` instead of `map()` and `concat()` may result in slower performance due to the overhead of iterating over each element.

**Pros and Cons**

| Approach | Pros | Cons |
| --- | --- | --- |
| `reduce()` | Suitable for small inputs or simple transformations | Can be slow due to memory allocations and function calls |
| `flatMap()` + `filter()` | Efficient for large datasets, but can lead to slower performance if not optimized correctly | May require more filters or array operations than necessary |
| Array.prototype.flatMap() | Returns a new iterable object without the need for concatenation | Not supported in older browsers |
| Array.prototype map() + Array.prototype concat() | Suitable for small inputs or simple transformations | Can be slow due to unnecessary memory allocations and function calls |
| Array.prototype forEach() + Array.prototype push() | Suitable for small inputs or simple transformations | Can be slower than other approaches due to the overhead of iterating over each element |

Overall, the choice of approach depends on the specific requirements and constraints of the project.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce	938.6 Ops/sec
flatMap + filter	1309.6 Ops/sec

Related benchmarks:

test reduce vs flatMap (version: 0)

Comparing performance of: reduce vs flatMap + filter

Created: one year ago by: Registered User

Jump to the latest result

reduce

flatMap + filter

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):