Benchmark: Array.prototype.concat vs spread operator

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
jQuery merge

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is tested, compared, and other considerations.

**Benchmark Definition**

The benchmark measures the performance of three different ways to concatenate arrays: `Array.prototype.concat`, the spread operator (`...`), and "jQuery merge" (which is not a standard JavaScript method).

*   **Array.prototype.concat**: This method creates a new array with the elements of both input arrays.
*   **Spread operator (`...`)**: Introduced in ES6, this syntax allows you to expand an array into individual elements.
*   **jQuery merge**: Although not a standard JavaScript method, this term is often used to describe the spread operator.

**Options Compared**

The benchmark compares the performance of these three methods:

| Method | Description | Purpose |
| --- | --- | --- |
| `Array.prototype.concat` | Creates a new array with the elements of both input arrays. | Traditional way of concatenating arrays. |
| Spread operator (`...`) | Expands an array into individual elements. | Newer, more concise way of concatenating arrays. |

**Pros and Cons**

*   **`Array.prototype.concat`**:
    *   Pros: Widely supported by older browsers and has a well-known API.
    *   Cons: Creates a new array, which can be inefficient in terms of memory usage.
*   **Spread operator (`...`)**
    *   Pros: More concise than `concat`, creates a shallow copy of the original array (preserves references to nested arrays).
    *   Cons: Not supported by older browsers, requires modern JavaScript syntax.

**Library Usage**

None of the provided methods use any external libraries. The spread operator is a built-in feature of modern JavaScript.

**Special JS Feature or Syntax**

The benchmark uses ES6 syntax (`...`) for the spread operator. This syntax was introduced in ES2015 and allows you to expand arrays into individual elements.

**Other Considerations**

*   The benchmark measures the performance of these methods using different browsers and devices, which provides a more realistic picture of their performance.
*   The "jQuery merge" test case is likely included for completeness, as it represents an alternative way of concatenating arrays in certain contexts (e.g., jQuery).
*   To get accurate results, ensure that your JavaScript engine supports modern ES6 syntax.

**Alternatives**

For those who want to explore alternative methods or libraries, here are a few options:

*   **`Array.prototype.push()`**: Instead of using `concat`, you can push elements onto the end of an array. However, this method modifies the original array.
*   **`String.join()`**: You can use `String.join()` to concatenate arrays by joining their elements into a single string.
*   **External libraries like Lodash or Ramda**: These libraries provide more functional programming-inspired methods for concatenating arrays and handling data transformations.

Remember that when working with performance-critical code, understanding the trade-offs between different approaches and considering your specific use case is essential.

Latest run results:

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

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

Browser/OS: Chrome 64 on Mac OS X 10.12.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5517172.5 Ops/sec
spread operator	3960061.2 Ops/sec
jQuery merge	24239532.0 Ops/sec

Related benchmarks:

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

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

Comparing performance of: Array.prototype.concat vs spread operator vs jQuery merge

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

jQuery merge

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):