Benchmark: flatMap(spread, concat) vs reduce vs forEach

Script Preparation code:

const sections = [
      {
        id: 'what',
        name: 'what',
        items: [
          {
            id: 'id',
            name: 'Id'
          },
          {
            id: 'yo',
            name: 'Date'
          }
        ]
      },
      {
        id: 'hey',
        name: 'hey',
        items: []
      },
      {
        id: 'ha',
        name: 'ha',
        items: [
          {
            id: 'good',
            name: 'good'
          }
        ]
      }
    ];

    var arr = [...sections];
    Array(10000)
      .fill(0)
      .forEach((i) => {
        arr = arr.concat(sections);
      });

Tests:

reduce with spread
const case1 = arr.reduce( (acc, cur, i) => [...acc, ...cur.items.map((item) => item.id + i)], [] );
reduce with concat
const case2 = arr.reduce((acc, cur, i) => acc.concat(cur.items.map((item) => item.id + i)), []);
flat
const case3 = arr.flatMap((x, i) => x.items.map((item) => item.id + i));
foreach
const case4 = []; arr.forEach((section, i) => { section.items.forEach((item) => { case4.push(item.id + i); }); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with spread
reduce with concat
flat
foreach

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Name:** `flatMap(spread, concat) vs reduce vs forEach`

The benchmark is comparing the performance of three different approaches to flatten an array of sections:

1. `flatMap` with spread (`[...arr]`)
2. `reduce` with concatenation (`acc.concat(cur.items.map((item) => item.id + i))`)
3. `forEach`

**Options Compared:**

* **FlatMap with Spread:** Using the spread operator to flatten the array, and then using `map` to add a suffix to each ID.
* **Reduce with Concatenation:** Using the `reduce` method to accumulate an array of IDs, concatenating arrays with `concat`.
* **forEach:** Iterating over the sections array using `forEach`, and pushing the ID suffix onto the result array.

**Pros and Cons:**

* **flatMap with Spread:**
	+ Pros:
		- More concise and expressive code
		- Avoids unnecessary intermediate arrays
	+ Cons:
		- May have performance overhead due to spread operator creation
* **Reduce with Concatenation:**
	+ Pros:
		- Efficient use of `reduce` for accumulating arrays
		- No explicit looping or array construction required
	+ Cons:
		- May have performance overhead due to concatenating arrays
		- More complex code structure
* **forEach:**
	+ Pros:
		- Simple and straightforward code
		- Easy to understand and maintain
	+ Cons:
		- May have performance overhead due to explicit looping
		- Creates an intermediate array, which can be memory-intensive

**Libraries Used:**

None in this benchmark.

**Special JS Features/Syntax:**

* `flatMap` is a method introduced in ECMAScript 2019, which flattens arrays and returns an array of results.
* Spread operator (`[...arr]`) is a syntax feature introduced in ECMAScript 2015.
* `reduce` is a built-in method for accumulating arrays.

**Other Considerations:**

* The benchmark uses a small dataset with only four sections. This may not accurately represent the performance characteristics of these methods on larger datasets or more complex scenarios.
* The browser used to run the benchmark (Chrome 102) may also affect the results, as different browsers can have varying performance characteristics and optimizations.

**Alternatives:**

Other approaches to flatten an array include:

* Using `Array.prototype.map` with a callback function that returns an array of IDs
* Using a library like Lodash or Underscore.js, which provides optimized implementations for flattening arrays.
* Using a different data structure, such as an object or a set, instead of an array.

Related benchmarks:

flatMap(spread, concat) vs reduce vs forEach (version: 0)

Comparing performance of: reduce with spread vs reduce with concat vs flat vs foreach

Created: 3 years ago by: Guest

Jump to the latest result

reduce with spread

reduce with concat

flat

foreach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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