Benchmark: Array.prototype.concat vs spread operator vs apply vs constructor

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ]; var other = params.push(...[1, 2]);
apply proto
var params = [ "hello", true, 7 ]; Array.prototype.push.apply(params, [1, 2]);
params.push
var params = [ "hello", true, 7 ]; var other = params.push.apply(params, [1, 2]);
constructor
var params = [ "hello", true, 7 ]; var other = Array.prototype.constructor.apply(null, params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
apply proto
params.push
constructor

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 7.0; LG-M400) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.101 Mobile Safari/537.36

Browser/OS: Chrome Mobile 87 on Android 7.0

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	592727.6 Ops/sec
spread operator	1910522.1 Ops/sec
apply proto	426563.5 Ops/sec
params.push	1952203.5 Ops/sec
constructor	283193.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance differences between various JavaScript methods for array operations is crucial in developing efficient code.

The provided benchmark compares the following methods:

1. `Array.prototype.concat()`
2. The spread operator (`...`)
3. `Array.prototype.push.apply()`
4. `params.push()` (a direct method call)

**Options Compared:**

*   **Spread Operator (`...`)**: This is a new syntax introduced in ECMAScript 2015 for creating arrays by spreading elements from an existing array or value.
*   **`Array.prototype.concat()`**: A traditional method for concatenating two or more arrays. It creates a new array and copies elements from the original arrays into it.
*   **`Array.prototype.push.apply()`**: This method pushes all elements of another iterable (array, object, string, etc.) onto the end of the current array. However, due to its implementation details, `push.apply()` can be less efficient than other methods for large arrays.

**Pros and Cons:**

*   **Spread Operator (`...`)**:
    *   Pros:
        *   More readable and expressive code
        *   Less memory-intensive because it doesn't create an intermediate array
    *   Cons:
        *   Not supported in older browsers or environments
*   **`Array.prototype.concat()`**:
    *   Pros:
        *   Widely supported across browsers and environments
        *   Simple to understand and implement
    *   Cons:
        *   Creates a new intermediate array, which can be memory-intensive for large arrays
*   **`Array.prototype.push.apply()`**:
    *   Pros:
        *   Can be more efficient than `concat()` or spread operator for very large arrays because it modifies the original array in-place.
    *   Cons:
        *   Less readable and explicit code compared to other methods
        *   Its performance can degrade depending on the browser or environment

**Library Usage:**

None of the provided benchmark test cases use a library, making them more focused on testing the intrinsic behavior of JavaScript's built-in `Array` class.

**Special JS Feature/Syntax (Not Applicable):**

None of the provided test cases utilize any special JavaScript features or syntax beyond what is necessary for demonstrating the differences in performance among these four methods.

Related benchmarks:

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

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

Comparing performance of: Array.prototype.concat vs spread operator vs apply proto vs params.push vs constructor

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

apply proto

params.push

constructor

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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