Benchmark: flatMap vs reduce with spread vs reduce with push vs for of vs push ...

Script Preparation code:

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

Tests:

reduce with spread
arr.reduce((acc, x) => [...acc, x], [])
flatMap
arr.flatMap(x => [x])
reduce with push
arr.reduce((acc, x) => { acc.push(x); return acc; }, [])
for...of
const acc = [] for (const x of arr) { acc.push(x); }
push(...arr)
const acc = [] acc.push(...arr);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with spread
flatMap
reduce with push
for...of
push(...arr)

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce with spread	31.5 Ops/sec
flatMap	5628.8 Ops/sec
reduce with push	36461.8 Ops/sec
for...of	44421.8 Ops/sec
push(...arr)	60266.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 and explain what is being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares four JavaScript methods for flattening an array: `flatMap`, `reduce with push`, `for...of`, and `push(...arr)`. Each method is evaluated on a large array of 10,000 elements.

**Test Cases**

Each test case represents one of the four methods being compared. Here's a brief explanation of each:

1. **`arr.flatMap(x => [x])"`**: This method uses `flatMap` to flatten the array by mapping over it and returning an array with the results.
2. **`arr.reduce((acc, x) => [...acc, x], [])`)**: This method uses `reduce` with the spread operator (`...`) to accumulate elements into an accumulator array.
3. **`const acc = []; for (const x of arr) { acc.push(x); }`**: This method uses a simple `for...of` loop to push each element onto an accumulating array.
4. **`const acc = []; acc.push(...arr);`**: This method uses the spread operator (`...`) to push all elements of the input array onto an accumulator array.

**Libraries and Features**

None of these methods rely on external libraries, but they do utilize JavaScript's built-in `Array.prototype.flatMap`, `Array.prototype.reduce`, and `Array.prototype.push` methods. The spread operator (`...`) is also used in some cases to flatten arrays.

**Special JS Features**

The `flatMap` method uses a syntax that is relatively new to JavaScript (introduced in ECMAScript 2019). It's called the "flatMap" method, which allows for concise and expressive array manipulation. The other methods do not rely on any special features or syntax beyond what's been introduced by the ECMAScript standards.

**Pros and Cons**

Here's a brief summary of each approach:

1. **`flatMap`**: Pros:
	* Concise and readable syntax
	* Expressive power to manipulate arrays in a single line
	* Efficient for large arrays
Cons:
	* May be unfamiliar to older JavaScript developers
2. **`reduce with push`**: Pros:
	* Easy to understand and implement for those familiar with `reduce`
	* Works on any array, regardless of length
Cons:
	* Requires more lines of code than some alternatives
	* May lead to complex logic if not implemented carefully
3. **`for...of` loop**: Pros:
	* Familiar syntax for older JavaScript developers
	* Easy to understand and implement
Cons:
	* More verbose than `flatMap`
4. **`push(...arr)`**: Pros:
	* Concise and expressive syntax using the spread operator
	* Works on arrays of any length
Cons:
	* May not be as readable or intuitive for some developers

**Other Alternatives**

If you need to flatten an array, but don't have access to modern JavaScript features like `flatMap`, here are a few alternative approaches:

1. **Using a loop**: A simple loop using `push` and indexing can achieve the same result.
2. **Using `Array.prototype.slice()`**: You can use `slice()` to create a shallow copy of the array, then push each element onto an accumulator array.

Example:
```javascript
const flattenedArr = [];
for (let i = 0; i < arr.length; i++) {
    flattenedArr.push(arr[i]);
}
```
3. **Using `Array.prototype.map()`**: You can use `map()` to create a new array with the flattened elements.
4. **Using `lodash` or another utility library**: If you're already using a utility library like Lodash, you may be able to use their `flatten()` function to flatten your array.

In summary, each method has its pros and cons, and the choice ultimately depends on personal preference, the specific requirements of your project, and familiarity with JavaScript features.

Related benchmarks:

flatMap vs reduce with spread vs reduce with push vs for of vs push ... (version: 0)

Comparing performance of: reduce with spread vs flatMap vs reduce with push vs for...of vs push(...arr)

Created: one year ago by: Guest

Jump to the latest result

reduce with spread

flatMap

reduce with push

for...of

push(...arr)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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