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

Tests:

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

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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 JSON and explain the different approaches, their pros and cons, and other considerations.

**What is being tested?**

The test case measures the performance of three ways to concatenate arrays or add elements to an array:

1.  **`Array.prototype.concat()`**: A traditional method for concatenating two arrays.
2.  **Spread operator (`...`)**: The new ES6 spread operator that allows you to expand an iterable into a new array.
3.  **`push()`**: Adding one or more elements to the end of an array using the `push()` method.

**Options comparison**

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

*   **`Array.prototype.concat()`**
    *   Pros: Simple, well-established, and widely supported.
    *   Cons: Creates a new array, can be slower than other methods due to the overhead of creating a new object.
*   **Spread operator (`...`)**
    *   Pros: Efficient, creates a new array with minimal overhead, and is modern and widely adopted.
    *   Cons: Requires ES6 support (or newer), might not work in older browsers or environments.
*   **`push()`**
    *   Pros: Fast, efficient, and can be used for adding multiple elements at once.
    *   Cons: Can lead to large arrays if not managed properly, might not work as expected with certain data types.

**Library usage**

None of the test cases use any external libraries.

**Special JS feature or syntax**

The spread operator (`...`) is a newer JavaScript feature introduced in ES6. It allows you to expand an iterable into a new array. This feature is supported in most modern browsers and environments, including Chrome 71, which is the browser used for this benchmark.

**Other alternatives**

If you need to concatenate arrays or add elements to an array without using these methods:

*   **`Array.prototype.slice()`**: Creates a shallow copy of a portion of an array.
*   **`Array.prototype.splice()`**: Removes elements from an array and returns them as a new array.
*   **Manual indexing**: Accessing individual array elements by index can be used to add or remove elements.

Keep in mind that these alternatives might have different performance characteristics, so it's essential to consider the specific use case when choosing the most suitable approach.

Related benchmarks:

Array.prototype.concat vs spread operator vs push (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: 7 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

No previous run results

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