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

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, params], [ "hello", true, 7 ]]; var other = params.flat();
concat using decomposition
var params = [[ 1, 2 ], [ "hello", true, 7 ]]; var other = [].concat(...params);

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

concat using decomposition

15.7M/s

reduce + Array.prototype.concat

12.8M/s

Array.prototype.flat

7.5M/s

Fastest: concat using decomposition (2.1x faster)

View exact numbers

✓ concat using decomposition: 15,703,672 ops/sec
• reduce + Array.prototype.concat: 12,790,720 ops/sec
• Array.prototype.flat: 7,505,332 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 using decomposition

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

concat using decomposition

17.7M/s

reduce + Array.prototype.concat

10.8M/s

Array.prototype.flat

7.8M/s

View exact numbers

Test name	Executions per second
✓ concat using decomposition	17,665,802 Ops/sec
reduce + Array.prototype.concat	10,846,811 Ops/sec
Array.prototype.flat	7,839,980 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark called "reduce.concat() vs flat() vs concat()" which compares three different approaches for flattening arrays: `Array.prototype.reduce()` with `concat`, `Array.prototype.flat()`, and using the new ES6 spread operator (`...`) with `concat`.

**What is tested on the provided JSON?**

The benchmark tests three approaches to flatten an array:

1. **`reduce + Array.prototype.concat`**: This approach uses the `reduce()` method to iterate over the array and concatenate each element using `concat()`.
2. **`Array.prototype.flat()`**: This approach uses the new ES6 method for flattening arrays, which was introduced in ECMAScript 2019.
3. **`concat using decomposition`**: This approach uses the spread operator (`...`) to pass the array elements as separate arguments to `concat()`.

**Options compared**

The benchmark compares the performance of these three approaches on a specific test case with an array containing nested arrays and values of different types (numbers, strings, booleans).

**Pros and Cons of each approach:**

1. **`reduce + Array.prototype.concat`**:
	* Pros: widely supported, easy to understand.
	* Cons: can be slow for large arrays, uses more memory due to the `concat()` method.
2. **`Array.prototype.flat()`**:
	* Pros: fast and efficient, reduces memory usage compared to `concat()`.
	* Cons: may not work as expected with non-numeric values or nested arrays with different types of elements.
3. **`concat using decomposition`**:
	* Pros: can be more readable and easier to understand for some developers, avoids the use of `concat()` method.
	* Cons: requires support for the spread operator (`...`) in older browsers, may not work as expected if the array contains non-numeric values or nested arrays with different types of elements.

**Other considerations**

* The benchmark assumes that the input arrays contain only numeric and string values. If the arrays can contain other data types (e.g., booleans), the results may be skewed.
* The test case is specific to JavaScript environments, so the performance differences between these approaches may not translate directly to other programming languages.

**Library**

None of the benchmark's code uses external libraries or frameworks.

**Special JS feature or syntax**

The benchmark uses the new ES6 spread operator (`...`) and the `flat()` method, which were introduced in ECMAScript 2019. These features are widely supported in modern JavaScript environments, but may not be compatible with older browsers.

**Other alternatives**

MeasureThat.net is a one-time benchmarking tool, so there are no "alternative" approaches to try. However, if you're interested in exploring other ways to flatten arrays, you can consider using `Array.prototype.reduce()` or implementing your own custom flattening function.

reduce.concat() vs flat() vs concat() (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 using decomposition`

Created: 6 years ago by: Guest

Go to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

concat using decomposition

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 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() (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 using decomposition

Created: 6 years ago by: Guest

Go to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

concat using decomposition

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `reduce + Array.prototype.concat vs Array.prototype.flat vs concat using decomposition`