Benchmark: Array concat vs spread operator vs push existing

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	18110490.0 Ops/sec
spread operator	47842992.0 Ops/sec
Push	91342480.0 Ops/sec
Push Apply	12994653.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Purpose**

The goal of this benchmark is to compare the performance of three different approaches for concatenating arrays: `Array.prototype.concat()`, the spread operator (`...`), and the `push()` method with multiple arguments. The focus is on understanding how these methods perform when dealing with existing arrays.

**Options Compared**

1. **`Array.prototype.concat()`**: This is a traditional method of concatenating arrays in JavaScript. It creates a new array and copies all elements from both input arrays into it.
2. **Spread Operator (`...`)**: The spread operator was introduced in ES6 as a concise way to expand an array or other iterable. When used with the `push()` method, it allows you to concatenate two arrays by spreading one of them into another.
3. **`push()` with multiple arguments**: This approach also uses the spread operator under the hood when called with multiple arguments. It appends all elements from the second array to the end of the first array.

**Pros and Cons**

*   **`Array.prototype.concat()`**:
    *   Pros: Simple, well-supported across browsers.
    *   Cons: Creates a new array, potentially wasteful if dealing with large datasets.
*   **Spread Operator (`...`) + `push()`**: This approach is often preferred for its concise syntax and performance benefits. However, it relies on JavaScript engine optimizations that might not be equally well-supported across all platforms or versions.
*   **`push()` with multiple arguments**:
    *   Pros: Efficient, as it modifies the original array without creating a new one.
    *   Cons: Requires using the spread operator (`...`) to work effectively.

**Library and Purpose**

There is no explicit library mentioned in the benchmark. However, some modern JavaScript engines might use additional features or optimizations not covered here.

**Special JS Feature/Syntax**

*   The `push()` method with multiple arguments uses the **rest parameter syntax**, introduced in ES2015 (`let args = (...params) => { ... }`). This allows a function to accept any number of arguments as an array, which can then be spread into other arrays or functions.
*   The spread operator (`...`), also known as the **spread element**, was introduced in ES6. It can be used with `push()` and other array methods to expand iterables (like arrays or strings) into new arrays.

**Alternatives**

1.  For a more comprehensive comparison, you might consider adding additional approaches, such as:
    *   Using `Array.from()`, which also creates a new array from an iterable.
2.  If focusing on other aspects of JavaScript performance, you could explore benchmarks for other features or methods, like regular expression matching or JSON parsing.

In conclusion, this benchmark compares the performance of three different approaches to concatenate arrays in JavaScript: traditional `Array.prototype.concat()`, the spread operator with `push()`, and the optimized version of `push()` without spreading. Understanding these options can help developers make informed decisions about their code's performance and efficiency requirements.

Related benchmarks:

Array concat vs spread operator vs push existing (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 vs Push Apply

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Push Apply

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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