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

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; for (var i=0;i<params.length;i++){ other.push(params[i])}

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 (X11; Linux x86_64; rv:105.0) Gecko/20100101 Firefox/105.0

Browser/OS: Firefox 105 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	11642639.0 Ops/sec
spread operator	10050214.0 Ops/sec
push	16595615.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and the pros/cons of each approach.

**Benchmark Definition**

The benchmark compares three different ways to concatenate (add elements to) an array in JavaScript:

1. **Array.prototype.concat()**: This is a traditional method that uses the `concat()` function to add one or more arrays to another array.
2. **Spread operator (`...`)**: The spread operator is a new feature introduced in ES6 (ECMAScript 2015) that allows you to expand an array into its elements, making it easier to concatenate arrays.
3. **Push()**: This method uses the `push()` function to add one or more elements to the end of an array.

**Options Comparison**

Here's a brief overview of each approach:

*   **Array.prototype.concat()**: Pros:
    *   Well-supported by most browsers and JavaScript engines.
    *   Easy to understand and use for developers familiar with traditional JavaScript methods.
*   **Spread operator (`...`)**: Pros:
    *   More concise and expressive than `concat()` or `push()`.
    *   Less prone to errors due to its syntax similarity to array literal creation.
*   **Push()**: Pros:
    *   Efficient, as it modifies the original array in place.
    *   Can be used for both single-element additions and multiple-element concatenations.

Cons:

*   **Array.prototype.concat()**: May have performance implications due to its function call overhead.
*   **Spread operator (`...`)**: May not work correctly in older JavaScript engines or environments that don't support ES6 features.
*   **Push()**: May require additional code to handle errors and edge cases.

**Library Considerations**

There are no libraries used in this benchmark.

**Special JS Feature/Syntax Consideration**

The spread operator (`...`) is the only special feature or syntax used in this benchmark. It's a relatively new feature introduced in ES6, which allows you to expand an array into its elements.

**Benchmark Result Interpretation**

Looking at the latest benchmark result:

| Test Name          | ExecutionsPerSecond |
|--------------------|-----------------------|
| push               | 16595615.0            |
| Array.prototype.concat| 11642639.0           |
| spread operator    | 10050214.0           |

The results suggest that, on this particular test setup and browser, `push()` is the fastest method for concatenating an array.

Other Alternatives

If you're looking for alternative methods to concatenate arrays in JavaScript, some options include:

*   **Using a library like Lodash**: The `concat` function from Lodash can be used instead of `Array.prototype.concat()`.
*   **Using `Array.prototype.push()` with arguments**: You can use `push()` with an array-like object (like the spread operator result) as its argument to avoid creating a new array.
*   **Using a library like Underscore.js**: This library provides a `concat` function that works similarly to `Array.prototype.concat()`.
*   **Using a different programming paradigm or approach**: Depending on your specific requirements, you might want to consider using a more functional programming style or a different data structure (like a linked list) instead of an array for concatenation.

In summary, the benchmark tests three common methods for concatenating arrays in JavaScript: `Array.prototype.concat()`, spread operator (`...`), and `push()`. The results suggest that `push()` is the fastest method on this particular test setup and browser.

Related benchmarks:

Array.prototype.concat vs spread operator vs push (version: 0)

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

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>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):