Benchmark: Spread Operator vs Push Method

Tests:

Spread
const array = new Array(100) const value = "Addition" let newArray = [...array, value]
Push
const array = new Array(100) const value = "Addition" let newArray = array.push(value)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spread	5967504.5 Ops/sec
Push	12985722.0 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares two ways to add an element to the end of an array in JavaScript:

**1. Spread Operator (`...`)**

*   **Benchmark Definition:** `let newArray = [...array, value]`
    *   It creates a new array by spreading the contents of the original `array` and then adding the `value` at the end.
* **Pros:** Concise syntax, often considered more readable than `push`.

**2. `push()` Method**

*   **Benchmark Definition:** `let newArray = array.push(value)`
    *   It modifies the existing `array` directly by adding the `value` to its end and returns the new length of the array.

* **Pros:** Mutates the original array in place, which can be more efficient for some use cases.

**Other Considerations:**

*   **Performance:** The benchmark results show that the `push()` method is significantly faster than using the spread operator in this specific case.  
*   **Side Effects:** The `push()` method modifies the original array, which might not always be desirable. If you need to preserve the original array, use the spread operator to create a new one.

**Alternatives:**

While these are the most common methods, there are other ways to add elements to arrays in JavaScript:

*   **Constructor (`new Array(...)`):**  Create a new array directly with the desired elements.
*   **concat():**  Creates a new array by joining existing arrays.

**Important Notes:**

* Benchmark results can vary based on factors like environment, browser, and specific implementation details. 
* Always consider the broader context of your code and choose the approach that best suits your needs regarding readability, performance, and side effects.

Related benchmarks:

Spread Operator vs Push Method (version: 0)

Comparing performance of: Spread vs Push

Created: 3 years ago by: Guest

Jump to the latest result

Spread

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):