Benchmark: arrays: concat vs spread

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: 11 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Mobile Safari/537.36 OPR/97.0.0.0

Browser/OS: Opera Mobile 97 on Android

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	9765142.0 Ops/sec
spread operator	43125516.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares two methods of combining arrays in JavaScript: the traditional `Array.prototype.concat()` method and the newer ES6 spread operator (`...`).

### Options Compared:
1. **Array.prototype.concat()**
   - **Description**: The `concat()` method is a built-in function that combines two or more arrays and returns a new array. It does not modify the existing arrays.
   - **Test Code**: 
     ```javascript
     var params = [ "hello", true, 7 ];
     var other = [ 1, 2 ].concat(params);
     ```
   - **Pros**:
     - Well-established method that is available across all JavaScript environments.
     - Allows for concatenating multiple arrays as arguments.
   - **Cons**:
     - Generally slower in performance compared to the spread operator in modern engines, as indicated by the benchmark results.
     - The syntax can be somewhat verbose and less intuitive for simple concatenations.

2. **Spread Operator**
   - **Description**: The spread operator (`...`) allows an iterable (like an array) to be expanded in places where zero or more arguments are expected. This provides a concise way to combine arrays.
   - **Test Code**: 
     ```javascript
     var params = [ "hello", true, 7 ];
     var other = [ 1, 2, ...params ];
     ```
   - **Pros**:
     - Generally faster than `concat()`, as seen in the benchmark results (approximately 2.5 times more executions per second).
     - Offers a more straightforward and readable syntax for combining arrays.
   - **Cons**:
     - Introduced in ES6 (ECMAScript 2015), which may not be supported in some very old JavaScript environments, although it's widely supported in modern browsers.

### Other Considerations:
- **Performance**: The results of the benchmark indicate that the spread operator significantly outperformed the `concat` method, with execution rates of about 17.66 million operations per second for the spread operator versus approximately 7.13 million for `concat`. This is an important factor to consider when selecting between these two approaches for performance-sensitive applications.
  
- **Readability**: In addition to performance, the spread operator provides better readability, making the code more intuitive for others who may read or maintain it.

### Alternatives:
- Other methods for combining arrays include using loops or `Array.prototype.push()`, but these approaches can be more complex and less efficient than `concat()` or the spread operator.
- **Using `Array.prototype.push.apply()`:** This method can be used to push elements from one array into another, but it also includes potential performance drawbacks and increased complexity:
  ```javascript
  var other = [1, 2];
  Array.prototype.push.apply(other, params);
  ```
- **Using `Array.from()` or similar utilities**: These can be used in combination to merge arrays, though they aren't as straightforward as `concat()` or the spread operator.

In summary, the benchmark clearly indicates that the ES6 spread operator is the more efficient and readable option for combining arrays compared to the traditional `concat()` method, particularly in modern JavaScript development.

Related benchmarks:

arrays: concat vs spread (version: 1)

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

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

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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