Benchmark: flatMap vs reduce (concat) vs reduce (push)

Script Preparation code:

var arr = Array(10_000).fill(1)

Tests:

Reduce concat
arr.reduce((acc, x, index) => acc.concat(x, index % 2 ? x : []), [])
FlatMap
arr.flatMap((x, index) => [x, index % 2 && x]).filter(Boolean)
Reduce push
arr.reduce((acc, x, index) => { acc.push(x); if(index % 2) { acc.push(x) } return acc; }, [])

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Reduce push

24K/s

FlatMap

1K/s

Reduce concat

4/s

Fastest: Reduce push (6074.5x faster)

View exact numbers

✓ Reduce push: 24,064 ops/sec
• FlatMap: 1,392 ops/sec
• Reduce concat: 4 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 concat
FlatMap
Reduce push

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

Browser/OS: Firefox 151 on Windows

View result in a separate tab

Reduce push

18K/s

FlatMap

3K/s

Reduce concat

9/s

View exact numbers

Test name	Executions per second
✓ Reduce push	18,438 Ops/sec
FlatMap	2,598 Ops/sec
Reduce concat	9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark measures the performance of three different approaches to concatenate arrays: `reduce` with concatenation, `flatMap`, and `reduce` with `push`.

The `Script Preparation Code` defines an array `arr` with 10,000 elements, all filled with the value `1`. This array is used as input for each benchmark.

**Test Cases**

There are three test cases:

1. **Reduce concat**: This test case uses the `reduce` method to concatenate two arrays. The callback function takes three arguments: `acc`, `x`, and `index`. It concatenates `x` with `acc` using the comma operator (`acc.concat(x, index % 2 ? x : [])`). The result is then returned.
2. **FlatMap**: This test case uses the `flatMap` method to create a new array with transformed elements. The callback function takes two arguments: `x` and `index`. It returns an array containing `x` and either `x` or an empty array, depending on whether `index` is even.
3. **Reduce push**: This test case uses the `reduce` method to push elements onto an accumulator array. The callback function takes three arguments: `acc`, `x`, and `index`. It pushes `x` onto `acc` using the `push` method. If `index` is even, it also pushes `x` again onto `acc`.

**Library Used**

The `flatMap` method uses the Array.prototype.flatMap() method, which was introduced in ECMAScript 2019.

**Special JS Feature/Syntax**

None of the test cases use any special JavaScript features or syntax that are not widely supported. However, it's worth noting that the `flatMap` method is a relatively new addition to the language, and its behavior might be affected by certain optimizations or compiler settings.

**Pros and Cons of Different Approaches**

Here are some pros and cons of each approach:

1. **Reduce concat**:
	* Pros: Simple and efficient for small arrays.
	* Cons: Inefficient for large arrays due to the overhead of concatenation.
2. **FlatMap**:
	* Pros: More concise and expressive than `reduce` with concatenation.
	* Cons: Can be slower due to the creation of a new array.
3. **Reduce push**:
	* Pros: Similar performance to `flatMap`, but might be slightly faster due to the use of `push`.
	* Cons: Less concise and expressive than `flatMap`.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **Array.prototype.flat()**: This method is similar to `flatMap`, but it returns a flattened array instead of an array of arrays.
2. **Array.prototype.map()` + `Array.prototype.concat()`: You can use the `map` method to transform elements and then concatenate them using the `concat` method.

Keep in mind that the performance differences between these alternatives might be significant, depending on the size and structure of your data.

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

Comparing performance of: `Reduce concat vs FlatMap vs Reduce push`

Created: 4 years ago by: Guest

Go to the latest result

Reduce concat

FlatMap

Reduce push

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 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 reduce (concat) vs reduce (push) (version: 0)

Comparing performance of: Reduce concat vs FlatMap vs Reduce push

Created: 4 years ago by: Guest

Go to the latest result

Reduce concat

FlatMap

Reduce push

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 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 concat vs FlatMap vs Reduce push`