Benchmark: Array.prototype.concat vs spread operator vs flat [huge collection]

Tests:

Array.prototype.concat
var params = new Array(1e6).fill(null).map(_ => Math.random() + 'x') var other = [ 1, 2 ].concat(params);
spread operator
var params = new Array(1e6).fill(null).map(_ => Math.random() + 'x') var other = [ 1, 2, ...params ]
Array.prototype.flat
var params = new Array(1e6).fill(null).map(_ => Math.random() + 'x') var other = [1, 2, params].flat()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Array.prototype.flat

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5.6 Ops/sec
spread operator	5.2 Ops/sec
Array.prototype.flat	5.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases to understand what's being tested.

**Benchmark Definition**
The benchmark compares three approaches for concatenating or transforming large arrays in JavaScript:

1. `Array.prototype.concat()`
2. The ES6 spread operator (`...`)
3. `Array.prototype.flat()` (a method introduced in ECMAScript 2019)

**Options Compared**

*   **`concat()`**: This is a traditional method for joining two arrays, where the second array is prepended to the first.
    *   Pros: Widely supported and easy to use, especially with older browsers that don't support spread operators or flat().
    *   Cons: Can lead to poor performance when dealing with large datasets due to its overhead in terms of iteration.
*   **Spread Operator (`...`)**: This is a shorthand for creating a new array by spreading the elements of an existing array into a new one. In this benchmark, it's used for two-step concatenation or transformation (e.g., spreading `params` and then using another spread to include `[1, 2]`).
    *   Pros: More readable, as you don't need to use a separate method like `concat()`. It also allows for easy manipulation of the original array's length.
    *   Cons: May not work well in older browsers (prior to Chrome 101), which might be using an older JavaScript engine that doesn't support this syntax. Additionally, if used incorrectly or without proper understanding, can lead to unexpected results due to how `...` behaves with nested arrays or objects.
*   **`Array.prototype.flat()`**: This method transforms a multi-dimensional array into a one-dimensional array by recursively flattening the inner arrays.
    *   Pros: It reduces the complexity of nested arrays and improves code readability. The flat() method also helps avoid potential performance issues when dealing with very large datasets due to less overhead in terms of iteration compared to `concat()`.

**Library/Functionality Used**

*   None, as all three operations are native JavaScript methods.
*   However, note that the use of spread operators (`...`) and `flat()` requires ECMAScript 2019 or newer. Older browsers might not support these features.

**Special JS Feature/Syntax**
The test case uses ES6 spread operator syntax (`...`). This is a relatively modern feature introduced in JavaScript for easier array manipulation, but it's also supported by all major browsers except Internet Explorer (now unsupported). The use of this syntax provides readable code and reduces the need for explicit method calls like `concat()`.

**Other Alternatives**

*   **`Array.prototype.push()`**: This can be used to concatenate arrays in a single operation.
    *   Pros: Faster than `concat()` as it modifies the original array, reducing overhead. However, since this approach also modifies the original array (and potentially changes its length), it may not be suitable for scenarios where preserving the original order or size is important.

In summary, the benchmark compares three approaches to concatenate or transform large arrays in JavaScript: `Array.prototype.concat()`, spread operator (`...`), and `Array.prototype.flat()`. Each approach has pros and cons based on readability, performance, browser support, and code modification impact.

Related benchmarks:

Array.prototype.concat vs spread operator vs flat [huge collection] (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs Array.prototype.flat

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Array.prototype.flat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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