Benchmark: Array concat vs spread operator vs push vs new array spread

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ] other = other.concat(params);
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ] other = other.push(...params);
New array spread
var params = [ "hello", true, 7 ] var other = [ 1, 2 ] var other = [ ...other, ...params ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Push
New array spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36

Browser/OS: Chrome 89 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7132648.0 Ops/sec
Push	30568930.0 Ops/sec
New array spread	26185424.0 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares three different methods of combining two arrays in JavaScript:

* **`Array.prototype.concat`:**  This is the traditional method for joining arrays, using the `concat()` function.

* **Spread Operator (`...`)**: This ES6 feature allows you to expand the elements of an array directly into another array.

* **`push()` method:** The `push()` method adds elements to the end of an existing array and returns the new length of the array. We're using it here with the spread operator to combine arrays.

Let's break down the pros and cons:

**Array.prototype.concat():**
* **Pros:** Widely understood, reliable, works consistently across different JavaScript engines.
* **Cons:** Can create a new array copy, potentially leading to memory overhead if you have very large arrays.

**Spread Operator (`...`)**:
* **Pros:** Concise syntax, often considered more readable than `concat()`, can be used in various contexts beyond array merging.
* **Cons:**  May not perform as efficiently as `push()` when dealing with very large arrays, as it might involve more copying operations internally.

**`push()` Method + Spread Operator**:
* **Pros:** Potentially the most efficient method, as it modifies the original array in-place instead of creating a new one.
* **Cons:**  Less versatile than `concat()` and spread operator; primarily designed for appending elements to an existing array.

**Other Considerations:**

* **Array Size:** For very small arrays, performance differences might be negligible. The choice becomes more significant with larger arrays due to potential memory implications.

* **Code Clarity:** While the spread operator offers a compact syntax, `concat()` can sometimes be more readable for beginners or in situations where its behavior is more explicit.

**Alternatives:**

* **Library Methods:**  Libraries like Lodash offer specialized functions for array manipulation that might provide optimized performance depending on your use case. 
* **Custom Functions:** You could write your own custom function to combine arrays based on specific requirements or optimization strategies.

The benchmark results you provided show that the `push()` method with the spread operator is currently the fastest in this scenario, followed by the spread operator and then `concat()`. However, these results can vary depending on factors like browser versions, JavaScript engines, and hardware.

Related benchmarks:

Array concat vs spread operator vs push vs new array spread (version: 0)

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

Comparing performance of: Array.prototype.concat vs Push vs New array spread

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Push

New array spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):