Benchmark: Array.prototype.concat.apply vs Array.prototype.concat + spread vs Array.prototype.flat operator

Tests:

Array.prototype.concat.apply
var params = [ [1, 2], [3, 4], [5, 6] ]; var result = [].concat.apply([], params);
Array.prototype.concat + spread operator
var params = [ [1, 2], [3, 4], [5, 6] ]; var result = [].concat(...params);
Array.prototype.flat
var params = [ [1, 2], [3, 4], [5, 6] ]; var result = params.flat();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

Browser/OS: Chrome 88 on Mac OS X 11.2.3

View result in a separate tab

Test name	Executions per second
Array.prototype.concat.apply	5234610.5 Ops/sec
Array.prototype.concat + spread operator	5422963.0 Ops/sec
Array.prototype.flat	965490.7 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and benchmark preparation code.

**Benchmark Definition**

The benchmark definition is to compare three different ways of concatenating arrays in JavaScript:

1. Using `Array.prototype.concat.apply`
2. Using `Array.prototype.concat` with the spread operator (`...`)
3. Using the new `Array.prototype.flat` operator

The goal is to see which method is the fastest for a given input.

**Individual Test Cases**

There are three test cases, each representing one of the methods mentioned above:

1. **Array.prototype.concat.apply**: This method uses the `apply` function to call the `concat` method on an empty array (`[]`). The `params` array (which contains sub-arrays) is passed as arguments to the `concat` method using `apply`. The resulting flattened array is stored in the `result` variable.
2. **Array.prototype.concat + spread operator**: This method uses the spread operator (`...`) to pass the `params` array (which contains sub-arrays) directly to the `concat` method on an empty array (`[]`). The resulting flattened array is stored in the `result` variable.
3. **Array.prototype.flat**: This method uses the new `flat` operator to flatten the `params` array (which contains sub-arrays). The resulting flattened array is stored in the `result` variable.

**Library and Special JS Features**

No external libraries are used in these test cases. However, the spread operator (`...`) is a special JavaScript feature introduced in ECMAScript 2015 (ES6) that allows an expression to be expanded into individual elements.

The `flat` operator is also a special JavaScript feature introduced in ECMAScript 2019 (ES9) that allows an array to be flattened recursively up to a specified depth.

**Pros and Cons**

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

1. **Array.prototype.concat.apply**: This method has been around for a while and is widely supported. However, it can be slower than other methods, especially for large inputs.
2. **Array.prototype.concat + spread operator**: This method is faster than `concat.apply` and more concise to write. However, the spread operator might not be supported in older browsers or environments.
3. **Array.prototype.flat**: This method is the fastest of the three and is specifically designed for flattening arrays. However, it's a newer feature that might not be supported in older browsers or environments.

**Other Alternatives**

If you don't need to flatten arrays recursively, you can also use `Array.prototype.map` and `Array.prototype.concat` together to achieve similar results. However, this method is generally slower than the `flat` operator.

Another alternative is to use a library like Lodash's `flatten` function, which provides a more robust and customizable way of flattening arrays. However, using a library might not be necessary if you're only working with flat arrays or small inputs.

Related benchmarks:

Array.prototype.concat.apply vs Array.prototype.concat + spread vs Array.prototype.flat operator (version: 0)

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

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

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat.apply

Array.prototype.concat + spread operator

Array.prototype.flat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 2 months ago):