Benchmark: Array.prototype.concat vs spread operator (forked without jQuery)

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 ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 98 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7173863.0 Ops/sec
spread operator	34826488.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches or libraries in JavaScript. The provided benchmark compares two methods for concatenating arrays: the traditional `Array.prototype.concat()` method and the new ES6 spread operator (`...`).

**What is Tested**

The benchmark tests the following aspects:

*   Performance difference between the traditional `concat()` method and the spread operator.
*   Consistency across different browsers and devices.

**Options Compared**

Two options are compared in this benchmark:

1.  **Traditional `Array.prototype.concat()` Method**: This method uses the `+` operator to concatenate two arrays, creating a new array with all elements from both arrays.
2.  **ES6 Spread Operator (`...`)**: This operator is used to create a new array by "spreading" elements from an existing array.

**Pros and Cons of Each Approach**

*   **Traditional `concat()` Method**:
    *   Pros:
        *   More readable code, as it explicitly shows the concatenation process.
        *   Can be more flexible when working with large datasets, as it allows for manual control over the order of elements.
    *   Cons:
        *   Creates a new array object each time `concat()` is called, which can lead to increased memory usage and slower performance compared to the spread operator.
*   **ES6 Spread Operator (`...`)**:
    *   Pros:
        *   More concise code, making it easier to read and write.
        *   Faster execution speed, as it avoids creating a new array object each time.

**Library Used**

None. This benchmark does not use any external libraries.

**Special JavaScript Feature or Syntax**

The spread operator (`...`) is a feature introduced in ECMAScript 2015 (ES6) that allows "spreading" elements from an existing array to create a new array. It's a concise way to achieve the same result as `concat()` but without creating a new object.

**Other Considerations**

*   **Memory Usage**: The traditional `concat()` method creates a new array object each time, which can lead to increased memory usage. In contrast, the spread operator does not create a new array object.
*   **Performance**: The spread operator is generally faster than the traditional `concat()` method, especially for large datasets.

**Alternatives**

Other alternatives for concatenating arrays include:

1.  Using `Array.prototype.push()`: Instead of concatenating two arrays, you can use `push()` to add elements to an existing array.
2.  Using a library like Lodash: Lodash provides a function called `concat()` that can be used instead of the native `concat()` method.

Note that these alternatives may have different trade-offs in terms of performance, readability, and memory usage.

Related benchmarks:

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

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

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):