Benchmark: Array.prototype.concat vs spread operator [3]

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 ]
double spread
var params1 = [ "hello", true, 7 ] var params2 = [ 1, false, "12" ] var merged = [...params1, ...params2]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

spread operator

89.8M/s

double spread

63.6M/s

Array.prototype.concat

26.1M/s

View exact numbers

Test name	Executions per second
✓ spread operator	89,847,848 Ops/sec
double spread	63,577,864 Ops/sec
Array.prototype.concat	26,059,610 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark titled "Array.prototype.concat vs spread operator [3]" evaluates the performance of two methods for merging arrays in JavaScript: the traditional `Array.prototype.concat` method and the newer ES6 spread operator (`...`). A third approach using double spread is also tested.

### Options Compared:
1. **Array.prototype.concat**
   - **Test Case**: `var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);`
   - **Description**: This method creates a new array by concatenating the provided array arguments, without modifying the original arrays.

2. **Spread Operator**
   - **Test Case**: `var params = [ "hello", true, 7 ]; var other = [ 1, 2, ...params ];`
   - **Description**: The spread operator expands an iterable (like an array) into a list of arguments. This approach generates an array that includes both existing elements and those from another array, all in a single operation.

3. **Double Spread**
   - **Test Case**: `var params1 = [ "hello", true, 7 ]; var params2 = [ 1, false, "12" ]; var merged = [...params1, ...params2];`
   - **Description**: This variant uses the spread operator twice to merge two arrays into one. It effectively combines elements from both `params1` and `params2`.

### Pros and Cons of Each Approach:

- **Array.prototype.concat**:
  - **Pros**:
    - Well-established and widely supported across all JavaScript environments.
    - Clear and explicit in terms of intention.
  - **Cons**:
    - Performance can be slower compared to the spread operator in certain environments.
    - Requires developers to explicitly call a method to execute the concatenation.

- **Spread Operator**:
  - **Pros**:
    - Provides a more concise and readable syntax for combining arrays.
    - Often performs better than `concat` in modern JavaScript engines due to optimizations.
  - **Cons**:
    - Introduced in ES6, so not available in older JavaScript environments (although most modern browsers support it).
    - Can lead to higher memory usage for larger arrays since it creates a new array.

- **Double Spread**:
  - **Pros**:
    - Very readable and suitable for merging multiple arrays at once.
    - Similar performance benefits as the single spread operator.
  - **Cons**:
    - Just as with the single spread, it necessitates the creation of a new array and may consume more memory.
    - Slightly more complex than using a simple `concat`.

### Additional Considerations:
- **Performance Results**:
  - The benchmark results indicate that the spread operator outperforms both the `concat` method and the double spread in terms of executions per second. Specifically, the results show:
    - Spread operator: **89,847,848 executions/sec**
    - Double spread: **63,577,864 executions/sec**
    - Array.prototype.concat: **26,059,610 executions/sec**
  
  This suggests that for most scenarios, the spread operator is the preferred choice for performance.

### Alternatives:
- Other methods for merging arrays include using libraries like Lodash with methods such as `_.merge` or `_.union` that offer additional functionality and convenience for handling complex array manipulations. However, these libraries may introduce overhead and dependencies that simple vanilla JS solutions do not have.

Overall, for developers working with modern JavaScript, the spread operator generally provides a superior combination of clarity, functionality, and performance, making it the better choice for merging arrays in most circumstances.

Array.prototype.concat vs spread operator [3] (version: 1)

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

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

Created: one year ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

double spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Array.prototype.concat vs spread operator [3] (version: 1)

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

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

Created: one year ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

double spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

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