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

Script Preparation code:

var params = [
    [1, 2],
    ["hello", true, 7],
    Array(50).fill(1),
    Array(50).fill(2),
    Array(50).fill(3),
    Array(50).fill(4),
    Array(50).fill(5),
    Array(50).fill(6),
    Array(50).fill(7),
    Array(50).fill(8),
    Array(50).fill(9),
    Array(50).fill(10),
];

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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.62

Browser/OS: Chrome 103 on Windows

View result in a separate tab

Test name	Executions per second
reduce + Array.prototype.concat	460286.7 Ops/sec
Array.prototype.flat	13456.4 Ops/sec
concat(...)	1423031.9 Ops/sec
reduce spread	159380.5 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**What is being tested?**

The benchmark tests four different approaches to concatenate arrays in JavaScript:

1. `reduce + Array.prototype.concat`
2. `Array.prototype.flat` (with and without specifying a depth)
3. `concat(...)`
4. `reduce spread`

The test cases are designed to compare the performance of these approaches on an array with 50 elements.

**Options being compared**

Here's a brief overview of each approach:

* **1. `reduce + Array.prototype.concat`**: This approach uses the `reduce()` method to iterate over the array and concatenate its elements using `Array.prototype.concat()`.
* **2. `Array.prototype.flat` (with depth 1)**: This approach uses the `flat()` method with a depth of 1 to flatten the array into a single-level array.
* **3. `concat(...)`**: This approach uses the spread operator (`...`) to concatenate arrays together.
* **4. `reduce spread`**: This approach uses the `reduce()` method with a spread operator (`...`) to iterate over the array and concatenate its elements.

**Pros and Cons of each approach**

Here's a brief summary of the pros and cons of each approach:

* **1. `reduce + Array.prototype.concat`**: Pros: can handle nested arrays, easy to implement. Cons: can be slower than other approaches due to the overhead of concatenating arrays.
* **2. `Array.prototype.flat` (with depth 1)**: Pros: efficient and fast, flattens arrays easily. Cons: may not work as expected for deeply nested arrays or arrays with non-array elements.
* **3. `concat(...)`**: Pros: concise and easy to read, efficient for shallow arrays. Cons: can be slower than other approaches for deeply nested arrays.
* **4. `reduce spread`**: Pros: modern and efficient, handles nested arrays well. Cons: requires JavaScript 5+ support and can be less readable due to the use of spread operators.

**Library usage**

In this benchmark, no specific library is used beyond the standard JavaScript array methods (`concat()`, `flat()`, and `reduce()`). However, it's worth noting that some JavaScript environments or frameworks may provide additional libraries or polyfills for these methods.

**Special JS features or syntax**

The benchmark uses modern JavaScript syntax, including:

* Spread operator (`...`)
* Arrow functions (`=>`)

These features are widely supported in modern JavaScript engines, but older versions of Internet Explorer and other browsers may not support them.

**Other alternatives**

If you're interested in exploring alternative approaches to concatenating arrays, here are a few examples:

* Using `Array.prototype.reduce()` with a custom function to concatenate elements
* Using `Map` or `Set` data structures to store concatenated elements
* Using a library like Lodash to provide an efficient and convenient way to concatenate arrays

These alternatives may offer better performance or more concise code, but they often come with additional dependencies or complexity.

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: 2 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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