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 ]
jQuery merge
var params = [ "hello", true, 7 ]; var other = $.merge([1, 2], params);
Push
var params = [ "hello", true, 7 ]; params.push(1); params.push(2); var other = params;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark compares the performance of three different approaches for creating arrays: `Array.prototype.concat`, the spread operator (`...`), and the `push()` method.

**Test Cases**

There are four test cases:

1. **Array.prototype.concat**: This test case uses the traditional `concat()` method to concatenate an array with another array.
2. **Spread Operator**: This test case uses the spread operator (`...`) to create a new array by spreading elements from an existing array.
3. **jQuery merge**: This test case uses the jQuery library's `$merge` function to concatenate arrays.
4. **Push**: This test case uses the `push()` method to add elements to an array and then creates a new array by assigning it to another variable.

**Comparison**

The comparison is between the performance of these four approaches:

*   `Array.prototype.concat`
*   Spread Operator (`...`)
*   jQuery merge
*   Push

**Options Compared**

The options compared are:

*   Concatenation methods (traditional `concat()`, spread operator)
*   Array creation methods (push, merge)
*   Library usage (jQuery's `$merge` function)

**Pros and Cons**

Here are some pros and cons of each approach:

1.  **Array.prototype.concat**
    *   Pros: Simple, widely supported, and well-documented.
    *   Cons: Can be slow for large arrays due to its iterative nature.

2.  **Spread Operator (`...`)**

*   Pros: Fast, concise, and modern. It avoids the overhead of creating a new array by concatenating multiple elements.
    *   Cons: Requires modern JavaScript versions (ES6+).

3.  **jQuery merge**

*   Pros: Convenient for jQuery developers who are already familiar with its API. However, it may not be as efficient as other methods due to additional overhead from the library.
    *   Cons: Adds unnecessary dependency on the jQuery library.

4.  **Push**

*   Pros: Very simple and fast for small arrays or when used correctly (by creating a new array explicitly).
    *   Cons: May not be suitable for larger arrays where its performance might degrade due to repeated `push()` operations, which can lead to frequent reallocations of the underlying array.

**Library Usage**

In this benchmark, jQuery is used in the "jQuery merge" test case. The `$merge` function concatenates two arrays and returns a new array containing all elements from both input arrays.

**Special JS Feature/Syntax**

None of the test cases utilize any special JavaScript features or syntax other than modern ES6+ spread operator (`...`).

Latest run results:

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

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

Browser/OS: Chrome 68 on Mac OS X 10.13.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5174930.5 Ops/sec
spread operator	21438100.0 Ops/sec
jQuery merge	0.0 Ops/sec
Push	28971984.0 Ops/sec

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 jQuery merge vs Push

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

jQuery merge

Push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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