Benchmark: flat vs flatMap vs reduce vs reduce push vs forEach push vs concat spread

Script Preparation code:

var arr = Array(100).fill(Array(20).fill(Math.random()*50))

Tests:

reduce
arr.reduce((acc, val) => acc.concat(val), [])
flatMap
arr.flatMap(x => x)
flat
arr.flat()
reduce push
arr.reduce((acc, val) => { if (val) val.forEach(a => acc.push(a)); return acc; }, [])
forEach push
let acc = []; arr.forEach(val => { val && val.forEach(v => acc.push(v)); }), acc;
concat spread
[].concat(...arr)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
flatMap
flat
reduce push
forEach push
concat spread

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 15 days ago):

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript array methods can be a complex task, as it depends on various factors such as the input data, hardware, and software configurations.

The benchmark provided by MeasureThat.net compares six array methods: `flat`, `flatMap`, `reduce`, `reducePush`, `forEachPush`, and `concatSpread`. Here's what each method does:

1. **`flat()`**: Returns a new array with all sub-array elements concatenated into it.
2. **`flatMap()`**: Similar to `map()`, but returns an array of the mapped values rather than an array of arrays.
3. **`reduce()`**: Applies a function against an accumulator and each element in the array, going from left to right, so as to reduce it to a single output value. The function takes four arguments: the accumulator, the current element, the index, and the array.
4. **`reducePush()`**: Similar to `reduce()`, but instead of returning a single output value, it pushes each element onto an accumulator array.
5. **`forEachPush()`**: Iterates over the array and calls a callback function for each element, pushing the result onto an accumulator array.
6. **`concatSpread()`**: Concatenates all elements in the array into a new array using the spread operator (`...`).

Now, let's discuss the pros and cons of each approach:

*   **`flat()`**:
    *   Pros: Simple and efficient for small to medium-sized arrays. It creates a new array with concatenated sub-array elements.
    *   Cons: Can lead to performance issues for very large arrays due to memory allocation and copying overhead.
*   **`flatMap()`**:
    *   Pros: More efficient than `map()` because it avoids creating an array of arrays, which can be expensive in terms of memory. It also provides a way to flatten arrays.
    *   Cons: May not work well with certain types of data (e.g., arrays of objects) or when used with certain map functions (e.g., `Array.prototype.map()`).
*   **`reduce()`**:
    *   Pros: Highly flexible and can be used for various accumulation tasks. It's also efficient because it avoids creating intermediate arrays.
    *   Cons: Can be complex to understand, especially for those new to the method. Its performance may vary depending on the implementation details.
*   **`reducePush()`**:
    *   Pros: Similar to `reduce()`, but with an added advantage of pushing elements onto an accumulator array instead of returning a single output value. This can be beneficial when working with large datasets or when memory allocation is not a concern.
    *   Cons: May lead to performance issues if the accumulator array becomes too large, causing excessive memory usage and potential out-of-memory errors.
*   **`forEachPush()`**:
    *   Pros: Easy to understand and implement. It's also more memory-efficient than `reducePush()`, as it doesn't create an intermediate accumulator array.
    *   Cons: May not be suitable for large datasets due to its iteration-based approach, which can lead to performance issues.

As for the libraries used in these methods:

*   **`Array.prototype.flatMap()`**: Introduced in ECMAScript 2019 (ES10), `flatMap()` provides a concise way to flatten arrays.
*   **`Array.prototype.flat()`**: Introduced in ECMAScript 2017 (ES7), `flat()` allows you to specify the maximum depth of array flattening.

Regarding special JavaScript features or syntax:

*   None are explicitly mentioned for this benchmark, but `flatMap()` utilizes the `map()` method and its return value.
*   There's also no mention of ES6+ features such as arrow functions (`=>`), async/await, or Promises.

Now that we have covered the key points, here are some alternatives:

1.  **Array.prototype.flat()** with a depth parameter to control how deeply nested arrays should be flattened.
2.  **Lodash** library for a more comprehensive set of utility functions, including array manipulation and flattening methods like `flatten()`, `flattenDeep()`, and `mapValues()`.
3.  **Ramda** library for functional programming and array manipulations using curried functions and immutability.

In conclusion, understanding the differences between these JavaScript array methods can be beneficial when optimizing performance or choosing the most suitable approach for a specific task.

Latest run results:

Run details: (Test run date: 13 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 130 on Android

View result in a separate tab

Test name	Executions per second
reduce	5928.9 Ops/sec
flatMap	12965.9 Ops/sec
flat	13409.4 Ops/sec
reduce push	13552.2 Ops/sec
forEach push	13685.7 Ops/sec
concat spread	122023.4 Ops/sec

Related benchmarks:

flat vs flatMap vs reduce vs reduce push vs forEach push vs concat spread (version: 0)

Comparing performance of: reduce vs flatMap vs flat vs reduce push vs forEach push vs concat spread

Created: one year ago by: Guest

Jump to the latest result

reduce

flatMap

flat

reduce push

forEach push

concat spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 15 days ago):