Benchmark: Array concat vs spread operator vs push SAM

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in the provided benchmark.

**Benchmark Purpose:**
The purpose of this benchmark is to compare the performance of three different methods for concatenating arrays in JavaScript:

1.  `Array.prototype.concat()`
2.  Spread operator (`...`)
3.  `push()` with spread operator (`...`)

These three approaches are compared to determine which one is the most efficient.

**Options Comparison:**

1.  **`Array.prototype.concat()`**: This method takes an array as an argument and returns a new array that contains all elements from both arrays.
    *   Pros:
        *   Widely supported in older browsers
        *   Easy to read and understand
    *   Cons:
        *   Can be slower compared to spread operator due to the overhead of creating a new array
2.  **Spread Operator (`...`)**: This method uses the spread operator (three dots `...`) to create a new array by copying all elements from an existing array.
    *   Pros:
        *   Fast and efficient
        *   Modern syntax makes it easy to read and understand
3.  **`push()` with Spread Operator (`...`)**: This method uses the `push()` method to add elements to an array, followed by the spread operator to copy all elements from an existing array.
    *   Pros:
        *   Fast and efficient
        *   Works well for arrays of varying lengths

**Library/Function Used:**
None. The benchmark only involves standard JavaScript functions and operators.

**Special JS Feature/Syntax:**
The benchmark uses the spread operator (`...`), which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). This syntax allows for creating new arrays by copying elements from an existing array.

**Other Considerations:**

*   The benchmark only runs on desktop devices with Chrome 83.
*   The benchmark uses the `ExecutionsPerSecond` metric to measure performance, which may not accurately reflect real-world scenarios where context switching and other factors can impact performance.
*   There are no variations of the benchmark that use older browsers or different versions of Chrome.

**Alternatives:**
There are alternative approaches for concatenating arrays in JavaScript, such as:

1.  Using `Array.prototype.reduce()` to concatenate two arrays
2.  Creating a new array using an array comprehension (a technique used in some functional programming languages)
3.  Using `String.prototype.concat()` if the elements being concatenated are strings

However, these alternatives may not be suitable for all use cases or performance-critical applications.

In summary, the benchmark is designed to compare the performance of three different methods for concatenating arrays in JavaScript: `Array.prototype.concat()`, spread operator (`...`), and `push()` with spread operator (`...`). The results provide insight into which approach is most efficient on a desktop device with Chrome 83.

Related benchmarks:

Array concat vs spread operator vs push SAM (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

Created: 5 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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