Benchmark: flatmap vs concat and spread operator

Script Preparation code:

var arrayArray = [{
        entries: [{
            id: 1
        }, {
            id: 2
        }]
    },
    {
        entries: [{
            id: 3
        }, {
            id: 4
        }]
    },
    {
        entries: [{
            id: 5
        }, {
            id: 6
        }]
    }
];

Tests:

flatmap
arrayArray.flatMap((item) => item.entries.map((entry) => entry.id));
concat with spread
[].concat(...arrayArray.map((item) => item.entries.map((entry) => entry.id)));

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

flatmap

4.6M/s

concat with spread

4.4M/s

View exact numbers

✓ flatmap: 4,564,437 ops/sec
• concat with spread: 4,384,418 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
flatmap
concat with spread

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/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

concat with spread

4.5M/s

flatmap

4.4M/s

View exact numbers

Test name	Executions per second
✓ concat with spread	4,521,110 Ops/sec
flatmap	4,449,058 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!

**Benchmark Definition**

The provided JSON represents a benchmark definition, which is a set of instructions that defines what should be tested in the benchmark. In this case, the benchmark definition consists of two test cases:

1. `flatmap`
2. `concat with spread`

**Test Case 1: flatmap**

In this test case, the JavaScript code uses the `flatMap()` method to process an array of objects. The `flatMap()` method takes a function as an argument and applies it to each element in the array, then flattens the resulting array. In this specific case, the function maps over the `entries` property of each object in the `arrayArray` and returns the `id` value.

**Test Case 2: concat with spread**

In this test case, the JavaScript code uses the `concat()` method to concatenate multiple arrays together using the spread operator (`...`). The code first maps over the `entries` property of each object in the `arrayArray`, then flattens the resulting array and concatenates it with an empty array.

**Comparison of Options**

The two test cases use different approaches to achieve the same result:

1. **flatmap**: This method uses the built-in `flatMap()` method, which is a part of the ECMAScript standard.
2. **concat with spread**: This method uses the `concat()` method and the spread operator (`...`), which are also part of the ECMAScript standard.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **flatmap**:
	* Pros: Concise, efficient, and widely supported.
	* Cons: May not be as intuitive for developers who are not familiar with the method.
2. **concat with spread**:
	* Pros: More explicit, easier to understand, and can be more readable for some developers.
	* Cons: Requires a function to map over the array, which may add overhead.

**Library Usage**

Neither of the test cases uses any external libraries. However, it's worth noting that `flatMap()` was introduced in ECMAScript 2019 (ES11), so older browsers or versions may not support this method.

**Special JavaScript Features or Syntax**

There are no special JavaScript features or syntax used in these test cases.

**Other Alternatives**

If you wanted to use alternative approaches, here are a few options:

1. **reduce()**: Instead of `flatMap()`, you could use the `reduce()` method with an accumulator function to achieve the same result.
2. **for...of loop**: You could use a traditional `for...of` loop with a callback function to iterate over the array and accumulate the results.
3. **Array.prototype.forEach()**: Similarly, you could use `forEach()` with a callback function to achieve the same result.

Keep in mind that these alternatives may have different performance characteristics or be more readable depending on your specific use case.

I hope this explanation helps! Let me know if you have any further questions.

flatmap vs concat and spread operator (version: 0)

Comparing performance of: `flatmap vs concat with spread`

Created: 3 years ago by: Guest

Go to the latest result

flatmap

concat with spread

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

flatmap vs concat and spread operator (version: 0)

Comparing performance of: flatmap vs concat with spread

Created: 3 years ago by: Guest

Go to the latest result

flatmap

concat with spread

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

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: `flatmap vs concat with spread`