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

Test name	Executions per second
reduce	97131.0 Ops/sec
foreach	133651.0 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.

Related benchmarks:

reduce vs foreach (version: 0)

Comparing performance of: reduce vs foreach

Created: 5 years ago by: Guest

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