Benchmark: Array.prototype.concat vs spread operator vs flat v2

Tests:

Array.prototype.concat
var params = [ "hello", true, 7, ['hey', ['there'], 'dude']]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7, ['hey', ['there'], 'dude']]; var other = [ 1, 2, ...params ]
Array.prototype.flat
var params = [ "hello", true, 7, ['hey', ['there'], 'dude']]; 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5215154.5 Ops/sec
spread operator	18011860.0 Ops/sec
Array.prototype.flat	2518167.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, "Array.prototype.concat vs spread operator vs flat v2", compares the performance of three different approaches to merge arrays in JavaScript: `Array.prototype.concat()`, the new ES6 spread operator (`...`), and `Array.prototype.flat()` (version 2).

**Options Compared**

1. **`Array.prototype.concat()`**: This method uses the `concat()` function to merge two or more arrays. It's a traditional way of merging arrays, but it can be slow for large arrays.
2. **Spread Operator (`...`)**: The spread operator is a new feature introduced in ES6 that allows you to expand an array into individual elements. When used with `var other = [ 1, 2, ...params ]`, it merges the `params` array into `other`.
3. **`Array.prototype.flat()` (version 2)**: This method recursively flattens an array of arrays. It's a more modern approach to merging arrays.

**Pros and Cons**

1. **`Array.prototype.concat()`**:
	* Pros: Well-established, widely supported.
	* Cons: Can be slow for large arrays due to the overhead of function calls.
2. **Spread Operator (`...`)**:
	* Pros: Fast, modern approach that takes advantage of array features.
	* Cons: May not be supported in older browsers or JavaScript engines.
3. **`Array.prototype.flat()` (version 2)**:
	* Pros: Efficient and easy to use for merging arrays.
	* Cons: May not work as expected with nested arrays of arbitrary depth.

**Library and Special JS Features**

None of the test cases explicitly uses a library, but they do rely on built-in JavaScript features.

**Special JS Feature - Spread Operator**

The spread operator (`...`) is a new feature introduced in ES6 that allows you to expand an array into individual elements. When used with `var other = [ 1, 2, ...params ]`, it merges the `params` array into `other`. This approach is particularly useful when merging arrays with variable numbers of elements.

**Benchmark Preparation Code and Test Cases**

The test cases define small sample arrays (`params`) and use each approach to merge them with another fixed array (`other`). The resulting arrays are not used in the benchmark, but their performance is measured.

Related benchmarks:

Array.prototype.concat vs spread operator vs flat v2 (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: 2 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):