Benchmark: Array concat vs spread operator vs push with large arrays

Tests:

Array.prototype.concat
let a = new Array(500000).fill(0); let b = new Array(10000).fill(0); var other = a.concat(b);
spread operator
let a = new Array(500000).fill(0); let b = new Array(10000).fill(0); var other = [ ...a, ...b ]
Push
let a = new Array(500000).fill(0); let b = new Array(10000).fill(0); var other = a.push(...b);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	455.5 Ops/sec
spread operator	265.0 Ops/sec
Push	319.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

The benchmark is comparing three different ways to concatenate or append large arrays in JavaScript:

1.  **`Array.prototype.concat()`**: This method creates a new array by copying elements from two existing arrays and returns the resulting array.
2.  **Spread Operator (`...`)**: This operator allows you to expand an array into separate elements, which can be used as individual arguments when calling functions like `push()`.
3.  **`Array.prototype.push()`**: This method appends one or more elements to the end of an existing array and returns the new length of the array.

**Pros and Cons:**

*   **`Array.prototype.concat()`**: Pros:

*   Well-established and widely supported method.
    *   Can handle large arrays efficiently due to its optimized implementation in V8 (Chrome's JavaScript engine).
    *   Returns a new array, which can be beneficial for memory management.

Cons:

*   Creates a new array, which can lead to increased memory usage.
    *   Less efficient than the spread operator or push method when dealing with very large arrays.
*   **Spread Operator (`...`)**: Pros:

*   More concise and readable syntax compared to `concat()` and `push()`.
    *   Efficiently uses built-in array operations, making it suitable for large arrays.
    *   Returns a new array, which can be beneficial for memory management.
*   **`Array.prototype.push()`**: Pros:

*   Creates a new array is not necessary; the original array's length increases by one element.
    *   Less efficient than `concat()` and spread operator when dealing with very large arrays.

Cons:

*   The performance difference between push and concat or spread for large arrays can be noticeable, depending on specific use cases.
    *   Push modifies the original array; if the array is not intended to grow dynamically, this could lead to issues.

**Library and Special JS Features:**

No libraries are mentioned in the benchmark definition. However, all tests assume that `Array.prototype.push()` and the spread operator (`...`) work as expected for large arrays.

There's no special JavaScript feature being tested here. The focus is on comparing three common methods for appending elements to an array.

**Other Alternatives:**

If you prefer or need alternative methods:

*   **Using `Array.from()`**: This method creates a new array from an iterable object, such as another array. It can be used in conjunction with spread operator (`...`).

Example:
    ```javascript
let other = Array.from([ ...a ], x => [x]);
```
*   **Using `slice()` and then `concat()`**: This method creates a shallow copy of a portion of an array using the slice() method, followed by concatenating with another array.

Example:
    ```javascript
let other = a.slice(0, 500000).concat(b);
```

Related benchmarks:

Array concat vs spread operator vs push with large arrays (version: 0)

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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