Benchmark: reduce.concat() vs flatMap()

Script Preparation code:

var flag = {
	a: {'truthy': true, 'falsey': false, 'only-in-a': true},
	b: {'truthy': true, 'falsey': false, 'only-in-b': true},
	unused: {'truthy': true, 'falsey': false},
};
var rollNames = ['a', 'b', 'missing'];

Tests:

reduce + Array.prototype.concat
var other = rollNames.flatMap(rollName => // convert flag object to array containing the names of all fields with a truthy value Object.entries(flag[rollName] ?? {}).reduce((opts, [key, value]) => opts.concat(value ? key : []), []) ).reduce((unique, option) => { // ensure option entries are unique return unique.includes(option) ? unique : unique.concat(option); }, []);
Array.prototype.flatMap
var other = [...new Set(rollNames.flatMap(rollName => // convert flag object to array containing the names of all fields with a truthy value Object.entries(flag[rollName] ?? {}).flatMap(([key, value]) => value ? [key] : []) ))];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce + Array.prototype.concat
Array.prototype.flatMap

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce + Array.prototype.concat	1165715.2 Ops/sec
Array.prototype.flatMap	1685277.4 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 world of JavaScript microbenchmarks on MeasureThat.net!

**Benchmark Definition:**
The benchmark compares two approaches to flatten an object and remove duplicates from an array:

1. Using `reduce()` with `Array.prototype.concat()`
2. Using `flatMap()` (a new ES6 spread operator)

**Options Compared:**

*   **`reduce()` with `Array.prototype.concat()`**: This approach uses the `reduce()` method to iterate over an object, extracting values and concatenating them into an array using `concat()`. The `reduce()` method is called on the resulting array to remove duplicates.
*   **`flatMap()` (new ES6 spread operator)**: This approach uses the `flatMap()` method to flatten an array and then removes duplicates by converting it to a Set.

**Pros and Cons of Each Approach:**

1.  **`reduce()` with `Array.prototype.concat()`**:
    *   Pros:
        *   More intuitive for developers familiar with `reduce()`.
        *   Can be implemented without relying on modern JavaScript features.
    *   Cons:
        *   Less efficient than `flatMap()` due to the overhead of concatenating arrays using `concat()`.
2.  **`flatMap()` (new ES6 spread operator)**:
    *   Pros:
        *   More concise and expressive than `reduce()` with `concat()`.
        *   Efficient, as it avoids unnecessary array concatenations.
    *   Cons:
        *   May require more familiarity with modern JavaScript features.

**Library and Special JS Feature:**
In this benchmark, the only library used is not explicitly mentioned. However, `flatMap()` is a modern JavaScript feature introduced in ECMAScript 2019 (ES10).

**Other Alternatives:**

For flattening arrays without using `flatMap()`, you could use other methods like:

*   Using `Array.prototype.map()` and then concatenating the resulting arrays.
*   Using `Array.prototype.reduce()` to flatten an array.

However, these alternatives might not be as efficient or concise as `flatMap()`.

**Additional Considerations:**

*   The benchmark uses a specific set of data (`rollNames` and `flag`) that may not be representative of real-world use cases. This could affect the results.
*   The browser used in the benchmark (Chrome 129) might have its own performance optimizations or quirks that could influence the outcome.

Keep in mind that microbenchmarks like this one aim to compare different approaches under controlled conditions, rather than simulating realistic scenarios.

Related benchmarks:

reduce.concat() vs flatMap() (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: reduce + Array.prototype.concat vs Array.prototype.flatMap

Created: 5 years ago by: Guest

Jump to the latest result

reduce + Array.prototype.concat

Array.prototype.flatMap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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