Benchmark: Array concat vs spread operator vs push with two arrays

Tests:

Array.prototype.concat
var arr1 = [ "the", "quick", "brown", "fox", "jumps" ]; var arr2 = [ "over", "the", "lazy", "dog" ]; var other = arr1.concat(arr2);
spread operator twice
var arr1 = [ "the", "quick", "brown", "fox", "jumps" ]; var arr2 = [ "over", "the", "lazy", "dog" ]; var other = [ ...arr1, ...arr2 ];
Push
var arr1 = [ "the", "quick", "brown", "fox", "jumps" ]; var arr2 = [ "over", "the", "lazy", "dog" ]; var other = arr1.push(...arr2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	9130439.0 Ops/sec
spread operator twice	25110960.0 Ops/sec
Push	32211366.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its results for you.

**Benchmark Definition**

The provided JSON defines a benchmark that compares three approaches to concatenate two arrays:

1.  **`Array.prototype.concat()`**: The traditional way of concatenating arrays in JavaScript using the `concat()` method.
2.  **Spread Operator (`...`)**: A new syntax introduced in ES6 (EcmaScript 2015) for spreading elements of an array into a new array.
3.  **`push()` with spread operator**: Using the `push()` method to add elements from another array to the current array.

**Comparison Options**

These three options are compared:

*   **`Array.prototype.concat()`**: This is a traditional way of concatenating arrays in JavaScript. It creates a new array and returns it.
*   **Spread Operator (`...`)**: This syntax allows you to spread elements of an array into a new array, which can be used to concatenate two arrays at once.
*   **`push()` with spread operator**: In this approach, `push()` is used to add elements from another array to the current array. However, it's not as efficient as using `concat()` or the spread operator.

**Pros and Cons**

Here are some pros and cons of each approach:

*   **`Array.prototype.concat()`**:
    *   Pros: Fast, widely supported, and well-documented.
    *   Cons: Creates a new array, which can lead to memory issues for large arrays.
*   **Spread Operator (`...`)**:
    *   Pros: Efficient, modern syntax, and creates a new array (but not as big as `concat()`) when used with `Array.prototype.concat()` or `Array.prototype.push()`.
    *   Cons: Introduced in ES6, may not be supported by older browsers or versions of JavaScript.
*   **`push()` with spread operator**:
    *   Pros: More efficient than `concat()` because it modifies the existing array instead of creating a new one.
    *   Cons: May not work as expected if the arrays are large, because it uses a lot of stack space.

**Library Usage**

None of these options use external libraries. They rely on built-in JavaScript features or the standard library for execution and comparison.

**Special JS Features or Syntax**

The spread operator (`...`) is a modern syntax introduced in ES6 (EcmaScript 2015). It allows you to expand elements of an array into a new array.

**Other Alternatives**

If you need alternative approaches, here are some:

*   **`Array.prototype.slice()`**: This method creates a shallow copy of a portion of an array and returns it. However, it's less efficient than `concat()` or the spread operator.
*   **`Array.prototype.splice()`**: This method modifies the existing array by removing elements from a specified position to a specified number of positions. While it can be used for concatenation, it's not as straightforward or efficient as using `concat()`, `push()` with spread operator, or the spread operator.

These alternatives are less commonly used and may have different performance characteristics compared to the options mentioned in the benchmark.

**Benchmark Results**

The provided results show the execution frequency per second (ExecutionsPerSecond) for each test case:

*   **`Array.prototype.concat()`**: 9130439 executions/second
*   **Spread Operator (`...`) with `Array.prototype.concat()`: 25110960 executions/second**
*   **`push()` with spread operator: 32211366 executions/second**

The results show that using the push method and spread operator is the most efficient approach, followed by using the spread operator with Array.prototype.concat(). The traditional concat method performs the least amount of work but also creates a new array, which can be memory-intensive for large arrays.

These test cases are useful for comparing different approaches to concatenate arrays in JavaScript.

Related benchmarks:

Array concat vs spread operator vs push with two arrays (version: 0)

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator twice

Push

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