Benchmark: reduce concat vs flat vs concat spread vs reduce spread

Script Preparation code:

var params = [
    [1, 2],
    ["hello", true, 7],
    Array(10000).fill(4),
];

Tests:

reduce + Array.prototype.concat
const x = params.reduce((acc, val) => acc.concat(val), []);
Array.prototype.flat
const x = params.flat(1);
concat(...)
const x = [].concat(...params)
reduce spread
const x = params.reduce((acc, val) => [...acc, ...val], []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome Mobile 142 on Android

View result in a separate tab

Test name	Executions per second
reduce + Array.prototype.concat	112309.6 Ops/sec
Array.prototype.flat	6802.0 Ops/sec
concat(...)	107203.4 Ops/sec
reduce spread	17501.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark compares four methods to concatenate or flatten an array:

1. `reduce + Array.prototype.concat`
2. `Array.prototype.flat` (new ES6 spread operator)
3. `concat(...)`
4. `reduce spread`

Each method is tested on a large dataset of 10,000 elements.

**Methods Compared**

Let's break down each method and its pros and cons:

1. **`reduce + Array.prototype.concat`**: This method uses the `Array.prototype.concat()` method to concatenate arrays. While this method works, it can be slow due to the overhead of creating a new array for each concatenation operation.
	* Pros: Well-established, widely supported.
	* Cons: Can be slow, creates multiple temporary arrays.
2. **`Array.prototype.flat`**: This method uses the `Array.prototype.flat()` method with the spread operator (`...`) to flatten an array. It's a relatively new feature introduced in ES6.
	* Pros: Fast, efficient, and concise way to flatten arrays.
	* Cons: Requires modern browsers and JavaScript engines that support this method (e.g., Chrome 129).
3. **`concat(...)`**: This method uses the spread operator (`...`) with `Array.prototype.concat()` to concatenate arrays. It's a more recent variation of the traditional concatenation method.
	* Pros: Fast, efficient, and concise way to concatenate arrays.
	* Cons: Requires modern browsers and JavaScript engines that support this syntax (e.g., Chrome 129).
4. **`reduce spread`**: This method uses the `reduce()` method with a custom callback function to flatten an array.
	* Pros: Flexible, allows for more control over the flattening process.
	* Cons: Can be slower than other methods due to the overhead of the `reduce()` method.

**Library and Special JS Feature**

None of these methods rely on any specific libraries. However, they do utilize modern JavaScript features such as:

* Spread operator (`...`)
* Arrow functions (`(acc, val) => ...`)
* Modern array methods like `concat()`, `flat()`

**Other Alternatives**

If you need to concatenate or flatten arrays in a different way, here are some alternative approaches:

* Using the `Array.prototype.push()` method with multiple arguments: `arr.push(...newArr)`
* Using the `Array.prototype.unshift()` method with multiple arguments: `arr.unshift(...newArr)`
* Using a `for` loop and array indexing to iterate over elements
* Using a custom implementation of concatenation or flattening using bitwise operations (less recommended)

Keep in mind that these alternatives might be less efficient, more verbose, or harder to maintain than the methods compared in this benchmark.

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(...) vs reduce spread

Created: 3 years ago by: Guest

Jump to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

concat(...)

reduce spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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