Benchmark: reduce.concat() vs flat() vs concat + spread vs reduce + spread

Tests:

reduce + Array.prototype.concat
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var other = params.reduce((acc, val) => acc.concat(val), []);
Array.prototype.flat
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var other = params.flat();
concat + spread
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var other = [].concat(...params);
reduce + spread
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var other = params.reduce((acc, val) => { acc.push(...val); return acc; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce + Array.prototype.concat
Array.prototype.flat
concat + spread
reduce + spread

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Overview**

The provided JSON represents a benchmark test on MeasureThat.net, which compares the performance of four different approaches to concatenate arrays in JavaScript:

1. `reduce + spread`
2. `concat + spread`
3. `reduce + Array.prototype.concat`
4. `Array.prototype.flat`

These methods are used to flatten an array with nested arrays.

**Options Compared**

The benchmark test compares the performance of these four methods on a specific input: `[[ 1, 2 ], [ "hello", true, 7 ]]`. The goal is to determine which method is fastest and most efficient.

**Pros and Cons of Each Approach**

Here's a brief overview of each approach:

### 1. `reduce + spread`

* Pros:
	+ Easy to implement
	+ Works well with arrays of arbitrary depth
* Cons:
	+ May have higher overhead due to the use of `Array.prototype.reduce()`
	+ Can be slower than other methods for very large inputs

This method uses the `reduce()` method to iterate over the input array and concatenate each element using the spread operator (`...`). The accumulator is initialized with an empty array, which is then populated with elements from the input array.

### 2. `concat + spread`

* Pros:
	+ Familiar and well-supported syntax
	+ Can be faster than `reduce` for large inputs
* Cons:
	+ May not work as expected with arrays of arbitrary depth (e.g., nested objects)
	+ Requires explicit concatenation using `Array.prototype.concat()`

This method uses the `concat()` method to concatenate each element of the input array, and then spreads the result into a new array.

### 3. `reduce + Array.prototype.concat`

* Pros:
	+ Combines the benefits of `reduce` and `concat`
	+ Works well with arrays of arbitrary depth
* Cons:
	+ May have higher overhead due to the use of `Array.prototype.concat()`
	+ Can be slower than other methods for very large inputs

This method uses the `reduce()` method to iterate over the input array, but instead of using the spread operator, it concatenates each element using `Array.prototype.concat()`. The accumulator is initialized with an empty array, which is then populated with elements from the input array.

### 4. `Array.prototype.flat`

* Pros:
	+ Optimized for arrays of arbitrary depth
	+ Can be faster than other methods for large inputs
* Cons:
	+ Less familiar syntax
	+ May not work as expected if the input array contains non-array elements

This method uses the `flat()` method to flatten an array with nested arrays. The input array is passed directly to the `flat()` method, which returns a new flattened array.

**Library and Syntax**

In this benchmark test, there are no libraries used other than built-in JavaScript methods (`Array.prototype.reduce()`, `Array.prototype.concat()`, and `Array.prototype.flat`).

There are no special JS features or syntax used in this benchmark. However, it's worth noting that the use of spread operators (`...`) is a relatively recent feature introduced in ES6 (ECMAScript 2015).

**Other Alternatives**

If you need to flatten arrays with nested objects, you may also consider using `Object.values()` and `Array.prototype.concat()`, or `Object.values()` and `Array.prototype.reduce()`.

For example:
```javascript
const flattenedArray = Object.values(inputArray).flatMap(val => val);
```
This approach uses the `Object.values()` method to extract array-like values from the input object, and then uses `Array.prototype.flatMap()` to flatten the resulting arrays.

In conclusion, this benchmark test provides a useful comparison of different approaches for concatenating arrays in JavaScript. The choice of method depends on your specific use case and performance requirements.

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce + Array.prototype.concat	8620512.0 Ops/sec
Array.prototype.flat	2550766.5 Ops/sec
concat + spread	9252096.0 Ops/sec
reduce + spread	16940088.0 Ops/sec

Related benchmarks:

reduce.concat() vs flat() vs concat + spread vs reduce + spread (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: reduce + Array.prototype.concat vs Array.prototype.flat vs concat + spread vs reduce + spread

Created: 11 months ago by: Guest

Jump to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

concat + spread

reduce + spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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