Benchmark: reduce vs foreach

Script Preparation code:

var data = [
  {id: 1, name: 'test1'},
  {id: 2, name: 'test2'},
  {id: 3, name: 'test3'},
  {id: 4, name: 'test4'},
  {id: 5, name: 'test5'},
  {id: 6, name: 'test6'},
  {id: 7, name: 'test7'},
  {id: 8, name: 'test8'},
  {id: 9, name: 'test9'},
  {id: 10, name: 'test10'},
  {id: 11, name: 'test11'},
  {id: 12, name: 'test12'},
  {id: 13, name: 'test13'},
  {id: 14, name: 'test14'},
  {id: 15, name: 'test15'},
  {id: 16, name: 'test16'},
  {id: 17, name: 'test17'},
  {id: 18, name: 'test18'},
  {id: 19, name: 'test19'},
];

Tests:

reduce
var flattened = data.reduce((entities, item) => { return { ...entities, [item.id]: item } }, {}); console.log(flattened);
foreach
var flattened = {}; data.forEach((item) => { flattened[item.id] = item; }); console.log(flattened);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
foreach

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 121 on Windows

View result in a separate tab

foreach

134K/s

reduce

97K/s

View exact numbers

Test name	Executions per second
✓ foreach	133,651 Ops/sec
reduce	97,131 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

The provided JSON represents two benchmark tests: "reduce" and "foreach". The goal of these benchmarks is to compare the performance of JavaScript's built-in `reduce` method versus the `forEach` loop for creating an object with flattened data from an array.

**Options being compared:**

1.  **Reduce Method:** This method takes a callback function that reduces the array elements to a single value, in this case, a new object with flattened data.
2.  **ForEach Loop:** This method iterates through each element of the array and applies a specified action (in this case, adding an entry to the result object).

**Pros and Cons:**

*   **Reduce Method Pros:**
    *   More concise code.
    *   Can be more efficient for large arrays since it only needs to iterate over the array once.
    *   Reduces memory usage by avoiding the creation of an intermediate collection (e.g., an array).
*   **Reduce Method Cons:**
    *   May have higher overhead due to function call stack management and potential performance differences between modern JavaScript engines.
    *   Less intuitive for beginners, as it requires a basic understanding of callbacks and state management.
*   **ForEach Loop Pros:**
    *   Highly intuitive for developers who are familiar with loops and array iteration.
    *   May be easier to debug due to its more explicit nature.
    *   Suitable for scenarios where the action is relatively simple (e.g., pushing an item to a result array).
*   **ForEach Loop Cons:**
    *   More verbose code.
    *   Requires additional memory allocation to store the intermediate collection (result object).

**Special JavaScript Features/Syntax:**

The provided benchmarks use standard JavaScript syntax and features. No special or experimental JavaScript features are employed.

**Library Usage:**

No external libraries are used in these benchmark tests.

**Alternative Approaches:**

Other approaches for creating a flattened array from an original array include:

*   Using `map()` followed by `reduce()`: This method is more similar to the `forEach` loop but uses the `map()` function to create a new array with transformed elements, and then applies `reduce()` to flatten it.
    ```javascript
const result = data.map((item) => ({...item}));
const flattened = result.reduce((acc, item) => ({...acc, [item.id]: item}), {});
```
*   Using a loop with an object literal: This approach creates an object literal and manually iterates over the array to add entries to it.
    ```javascript
const flattened = {};
for (let i = 0; i < data.length; i++) {
  const item = data[i];
  flattened[item.id] = item;
}
```
*   Utilizing modern JavaScript features like `Array.prototype.reduce()` and `Object.fromEntries()`: These methods provide more concise ways to achieve the desired result.
    ```javascript
const flattened = Object.fromEntries(data.map((item) => [item.id, item]).flatMap(([id, item]) => [[id, item]]));
```
Each of these alternative approaches has its own trade-offs and is suited for different use cases.

**Conclusion:**

The provided benchmarks compare the performance of JavaScript's built-in `reduce` method versus the `forEach` loop for creating an object with flattened data from an array. The choice between these methods depends on the specific requirements of your application, including code readability, memory efficiency, and potential performance differences.

reduce vs foreach (version: 0) Benchmark.js

Comparing performance of: `reduce vs foreach`

Created: 5 years ago by: Guest

Go to the latest result

reduce

foreach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

reduce vs foreach (version: 0) Benchmark.js

Comparing performance of: reduce vs foreach

Created: 5 years ago by: Guest

Go to the latest result

reduce

foreach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Comparing performance of: `reduce vs foreach`