Benchmark: Reduce Push vs. flatMap

Script Preparation code:

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

Tests:

Reduce Push
arr.reduce((acc, x) => { acc.push(x, x); return acc; }, [])
flatMap
arr.flatMap(x => [x, x])

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 runs

Reduce Push

22K/s

flatMap

4K/s

Fastest: Reduce Push (6.0x faster)

View exact numbers

✓ Reduce Push: 21,505 ops/sec
• flatMap: 3,555 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 Push
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/139.0.0.0 Safari/537.36

Browser/OS: Chrome 139 on Mac OS X 10.15.7

View result in a separate tab

Reduce Push

19K/s

flatMap

4K/s

View exact numbers

Test name	Executions per second
✓ Reduce Push	19,351 Ops/sec
flatMap	3,900 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 and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches: `reduce` with a custom callback that pushes elements to an accumulator array (`Reduce Push`), and `flatMap` (which is supported by modern JavaScript engines, introduced in ECMAScript 2019). The test case uses an array of 10,000 zeros as the input data.

**Options Compared**

The benchmark compares two options:

1. **Reduce Push**: This approach uses the `reduce()` method to accumulate elements in an array. In this custom implementation, each element is pushed twice (i.e., `x` and `x`) into the accumulator array (`acc`). The callback returns the updated accumulator array.
2. **flatMap**: This approach uses the `flatMap()` method to transform the array into a new array with the same length as the original array, but with each element transformed by the provided function (in this case, an arrow function that doubles the value).

**Pros and Cons of Each Approach**

1. **Reduce Push**:
	* Pros:
		+ Can be more efficient for small arrays since it avoids the overhead of creating a new array.
		+ Allows for customization of the accumulator and callback.
	* Cons:
		+ Can lead to slower performance for large arrays due to the creation of multiple intermediate arrays.
		+ May have higher memory usage due to the accumulation of elements in an array.
2. **flatMap**:
	* Pros:
		+ More efficient for large arrays since it avoids creating intermediate arrays.
		+ More readable and concise code.
	* Cons:
		+ Introduced in ECMAScript 2019, so older browsers may not support it.
		+ May have slightly higher memory usage due to the creation of a new array.

**Library and Purpose**

The `flatMap()` method is part of the modern JavaScript standard, introduced in ECMAScript 2019. Its purpose is to transform an array into a new array by applying a transformation function to each element, which returns an array-like object. This allows for efficient processing of large datasets while maintaining readability.

**Special JS Feature or Syntax**

There is no special feature or syntax mentioned in the benchmark code. However, it's worth noting that modern JavaScript engines support `flatMap()` and other new features introduced in ECMAScript 2019.

**Other Alternatives**

If you're interested in alternative approaches for reducing arrays, consider:

1. **Array.prototype.reduce()**: The built-in `reduce()` method is similar to the custom implementation used in "Reduce Push".
2. **Array.prototype.map() + Array.prototype.concat()**: This approach can be used instead of `flatMap()`. However, it may have slightly higher performance overhead due to the creation of intermediate arrays.

In conclusion, this benchmark compares two approaches for reducing an array: a custom implementation using `reduce()` (`Reduce Push`), and the modern `flatMap()` method. The choice between these approaches depends on your specific use case, performance requirements, and desired level of customization.

Reduce Push vs. flatMap (version: 0)

Comparing performance of: `Reduce Push vs flatMap`

Created: 5 years ago by: Guest

Go to the latest result

Reduce Push

flatMap

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 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 Push vs. flatMap (version: 0)

Comparing performance of: Reduce Push vs flatMap

Created: 5 years ago by: Guest

Go to the latest result

Reduce Push

flatMap

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 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 Push vs flatMap`