Benchmark: eliya and sharon :)

Script Preparation code:

var arr = Array(1000_000).fill({entities:[1,2]})

Tests:

reduce with push
arr.reduce((acc, { entities }) => { const newE = entities.map((x) => x); acc.push(...newE); return acc; }, []);
flatMap
arr.flatMap(({ entities }) => entities.map((x) => x));
reduce with concat
arr.reduce((acc, { entities }) => { const newE = entities.map((x) => x); acc.concat(newE); return acc; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with push
flatMap
reduce with concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
reduce with push	11.7 Ops/sec
flatMap	7.9 Ops/sec
reduce with concat	19.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark presented tests three JavaScript approaches for processing an array of objects in order to extract and flatten nested data. The array `arr` is initialized to contain 1,000,000 objects, with each object containing an `entities` property that is an array of numbers (in this case, simply `[1, 2]`).

### Test Cases Explained:

1. **Reduce with Push**:
    ```javascript
    arr.reduce((acc, { entities }) => {
        const newE = entities.map((x) => x);
        acc.push(...newE);
        return acc;
    }, []);
    ```
   - **Description**: This approach uses the `reduce` method to iterate over each object in the array. For each object, it extracts the `entities` array, maps through it (although this is somewhat redundant here, as it's just copying the values), and pushes them to the accumulator array `acc` using the spread operator.
   - **Pros**: The `push` method is efficient for adding multiple elements to an array.
   - **Cons**: The need for creating a new array with `map` might add unnecessary complexity in this specific case.

2. **FlatMap**:
    ```javascript
    arr.flatMap(({ entities }) => entities.map((x) => x));
    ```
   - **Description**: This approach utilizes the `flatMap` method, which combines the functionality of mapping and flattening the result. For each object, it directly maps the `entities` array and flattens the result in a single operation.
   - **Pros**: `flatMap` can be more concise and performant in scenarios where the data needs to be flattened, removing the need for a separate concatenate or push operation.
   - **Cons**: Some older JavaScript environments may not support `flatMap`, which could be a consideration for compatibility.

3. **Reduce with Concat**:
    ```javascript
    arr.reduce((acc, { entities }) => {
        const newE = entities.map((x) => x);
        acc.concat(newE);
        return acc;
    }, []);
    ```
   - **Description**: This variant also uses `reduce`, but it uses `concat` to combine the arrays. It tries to concatenate `newE` to `acc` but does not update `acc` correctly since `concat` returns a new array rather than modifying `acc` in place.
   - **Pros**: Using `concat` can be semantically clearer in some cases as it indicates that arrays are being combined.
   - **Cons**: It doesn’t work as intended here because it lacks a reassignment to `acc`. This results in `acc` never accumulating the values, leading to potential performance issues and incorrect results.

### Benchmark Results:
The results from the benchmark show execution rates for each method, measured in executions per second:

- **Reduce with Concat**: 19.74 executions per second (fastest)
- **Reduce with Push**: 11.66 executions per second
- **FlatMap**: 7.90 executions per second (slowest)

### Other Considerations:
- **Performance**: As seen from the benchmark results, `reduce` with `concat` was the fastest approach in this environment. However, the appropriateness of each method may depend on specific data structures and requirements in different contexts.
- **Readability**: While performance is vital, maintaining readable and maintainable code is equally important. Using more straightforward or established patterns can sometimes be preferable, even if they are slightly less performant.

### Alternatives:
- **For Loops**: A classic `for` loop could also be used to achieve similar results. Utilizing a `for` loop can provide the greatest flexibility and potentially offer the best performance, although it sacrifices some of the readability of functional programming methods.
- **Array.prototype.map + Array.prototype.flat**: An alternative to `flatMap` is using `map` followed by `flat`, though this is less efficient due to executing two methods sequentially.

In summary, the benchmark compares three different methods of flattening and processing nested data structures in JavaScript, highlighting performance, readability, and correctness for software engineers to consider.

Related benchmarks:

eliya and sharon :) (version: 1)

Comparing performance of: reduce with push vs flatMap vs reduce with concat

Created: one month ago by: Guest

Jump to the latest result

reduce with push

flatMap

reduce with concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):