Benchmark: Concat array concat, spread, push spread

Tests:

Array.prototype.concat
const params = [ "hello", true, 7 ]; const other = [ 1, 2 ].concat(params);
spread operator
const params = [ "hello", true, 7 ] const other = [ 1, 2, ...params ]
push spread operator
const params = [ "hello", true, 7 ]; const other = [ 1, 2 ].push(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

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

Browser/OS: Chrome 113 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	8471995.0 Ops/sec
spread operator	40832756.0 Ops/sec
push spread operator	43054964.0 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition JSON**

The benchmark definition defines three different approaches for concatenating arrays: traditional `concat()`, spread operator (`...`), and push spread operator (`push(...)`).

* **Traditional `concat()`**: This method uses the `concat()` function to merge two or more arrays.
* **Spread Operator (`...`)**: Introduced in ES6, this operator allows you to expand an iterable (like an array) into individual elements.
* **Push Spread Operator (`push(...)`)**: Similar to the spread operator, but it's used with the `push()` method to add new elements to an existing array.

**Test Cases**

There are three test cases:

1. **Array.prototype.concat**: This test case uses the traditional `concat()` method to concatenate two arrays: `[ 1, 2 ]` and `params`.
2. **Spread Operator**: This test case uses the spread operator (`...`) to expand the `params` array into individual elements and merge them with the existing array `[ 1, 2 ]`.
3. **Push Spread Operator**: This test case uses the push spread operator (`push(...)` to add new elements from the `params` array to the existing array `[ 1, 2 ]`.

**Library and Special JS Features**

* The benchmark doesn't use any external libraries.
* There are no special JavaScript features or syntax being tested.

**Pros and Cons of Different Approaches**

* **Traditional `concat()`**: This method is widely supported across most browsers and can be a good fallback for older environments. However, it may not be as efficient as the other two methods due to its overhead.
* **Spread Operator (`...`)**: This operator is relatively new (introduced in ES6) but has become widely adopted. It's generally more efficient than `concat()` and provides a concise way to merge arrays. However, some older browsers might not support it yet.
* **Push Spread Operator (`push(...)`):** Similar to the spread operator, this method is also relatively new and only available in modern browsers.

**Other Alternatives**

If you wanted to test alternative approaches for concatenating arrays, here are a few examples:

* Using `Array.prototype.reduce()` or `Array.prototype.forEach()`
* Using `Array.prototype.slice()` with two arguments
* Using `new Array().push(...)` (although this method has some performance implications)

Keep in mind that these alternatives might not be as efficient or widely supported as the traditional `concat()` method, and their performance may vary depending on the specific use case.

Overall, this benchmark provides a good comparison between three popular methods for concatenating arrays in JavaScript, allowing developers to see which approach performs best in different browsers and environments.

Related benchmarks:

Concat array concat, spread, push spread (version: 0)

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

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

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

push spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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