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], []);

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

concat(...)

547K/s

reduce + Array.prototype.concat

531K/s

reduce spread

27K/s

Array.prototype.flat

11K/s

Fastest: concat(...) (50.0x faster)

View exact numbers

✓ concat(...): 546,501 ops/sec
• reduce + Array.prototype.concat: 530,731 ops/sec
• reduce spread: 26,968 ops/sec
• Array.prototype.flat: 10,940 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 + Array.prototype.concat
Array.prototype.flat
concat(...)
reduce spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 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

reduce + Array.prototype.concat

112K/s

concat(...)

107K/s

reduce spread

18K/s

Array.prototype.flat

7K/s

View exact numbers

Test name	Executions per second
✓ reduce + Array.prototype.concat	112,310 Ops/sec
concat(...)	107,203 Ops/sec
reduce spread	17,501 Ops/sec
Array.prototype.flat	6,802 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.

reduce concat vs flat vs concat spread vs reduce spread (version: 0) Benchmark.js

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: 4 years ago by: Guest

Go to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

concat(...)

reduce spread

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 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 concat vs flat vs concat spread vs reduce spread (version: 0) Benchmark.js

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: 4 years ago by: Guest

Go to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

concat(...)

reduce spread

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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