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] : []) ))];

Historical Performance Data aggregated from 23 community runs

Desktop Results:

Chrome 18 runs

Array.prototype.flatMap

739K/s

reduce + Array.prototype.concat

683K/s

View exact numbers

✓ Array.prototype.flatMap: 739,400 ops/sec
• reduce + Array.prototype.concat: 682,937 ops/sec

Firefox 5 runs

reduce + Array.prototype.concat

817K/s

Array.prototype.flatMap

798K/s

View exact numbers

✓ reduce + Array.prototype.concat: 817,139 ops/sec
• Array.prototype.flatMap: 798,136 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

Array.prototype.flatMap

1.7M/s

reduce + Array.prototype.concat

1.2M/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.flatMap	1,685,277 Ops/sec
reduce + Array.prototype.concat	1,165,715 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.

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

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

Go to the latest result

reduce + Array.prototype.concat

Array.prototype.flatMap

Historical Performance Data aggregated from 23 community runs

Desktop Results:

Chrome 18 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Go to the latest result

reduce + Array.prototype.concat

Array.prototype.flatMap

Historical Performance Data aggregated from 23 community runs

Desktop Results:

Chrome 18 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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