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

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Array.prototype.flat
var params = [ "hello", true, 7 ]; 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: 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	7805219.0 Ops/sec
spread operator	37972360.0 Ops/sec
Array.prototype.flat	1075347.8 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 explanation of the provided benchmark.

**Benchmark Purpose**

The benchmark is designed to compare three approaches for concatenating or flattening arrays in JavaScript:

1.  `Array.prototype.concat()`
2.  The new ES6 spread operator (`...`)
3.  `Array.prototype.flat()` (specifically, when used with a single element array)

**Comparison of Approaches**

Here's a brief overview of each approach and their pros and cons:

*   **`Array.prototype.concat()`**: This method creates a new array by copying elements from two or more source arrays. It can be slower than the other two methods because it involves creating a new array object, which requires memory allocation.
    *   Pros: Well-established, widely supported, and easy to understand.
    *   Cons: Can be slow due to memory allocation, may not be suitable for large datasets.
*   **The ES6 spread operator (`...`)**: This operator creates a new array by copying elements from an existing array. It's generally faster than `concat()` because it doesn't require creating a new object or allocating memory for each element.
    *   Pros: Fast, efficient, and concise.
    *   Cons: Only works with arrays, may not be as intuitive for those unfamiliar with the syntax.
*   **`Array.prototype.flat()`**: This method flattens an array by recursively concatenating sub-arrays. When used with a single-element array (like `[ [1, 2] ]`), it's more efficient than `concat()` or spread operator because it only requires one allocation.
    *   Pros: Fast and efficient when dealing with nested arrays, easy to use.
    *   Cons: May not be suitable for all scenarios, as the behavior changes depending on the depth of nesting.

**Library and Special JS Features**

The benchmark uses JavaScript built-in functions and doesn't rely on any specific libraries. However, it does take advantage of a special syntax feature introduced in ES6: the spread operator (`...`).

**Test Case Explanation**

Each test case is designed to measure the performance of each approach:

*   The first test case measures `Array.prototype.concat()` with an array containing a string, boolean, and number.
*   The second test case measures the spread operator (`...`) with the same input as the previous test case.
*   The third test case measures `Array.prototype.flat()` when used with a single-element sub-array.

**Other Alternatives**

If you need to concatenate or flatten arrays in JavaScript, other alternatives include:

*   Using `Array.from()` and providing an iterable source array
*   Creating a new array using the `Array` constructor and pushing elements from another array
*   Using third-party libraries like Lodash

Keep in mind that these alternatives might not be as efficient or concise as the built-in functions used in the benchmark.

Related benchmarks:

Array.prototype.concat vs 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 vs spread operator vs Array.prototype.flat

Created: 4 years ago by: Registered User

Jump to the latest result

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.2:3b, generated 2 months ago):