Benchmark: Array concat vs spread vs push spread

Script Preparation code:

var subarrs = [
 [ {"name": "hello", "isGood": true},
  {"name": "hello", "isGood": false},
  {"name": "hello2", "isGood": true},
 ],
 
];

Tests:

Array.prototype.concat
var other = [ {"name": "hello 3", "isGood": true} ] subarrs.concat(other)
Push Spread
var other = [ {"name": "hello 3", "isGood": true} ] subarrs.push(...other)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Push Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	13640891.0 Ops/sec
Push Spread	13566876.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance of three different methods for combining arrays in JavaScript: the traditional `Array.prototype.concat` method, the ES6 spread operator used with the `push` method (`array.push(...other)`), and the spread operator by itself (though it is not directly included in the tests as they are defined). The benchmark compares these methods in terms of execution speed.

### Comparison of Options

1. **Array.prototype.concat**:
   - **Description**: This method is used to merge two or more arrays. It does not change the existing arrays but instead returns a new array.
   - **Pros**:
     - Immutable: Doesn’t modify the original array, maintaining data integrity.
     - Readable: Many developers are familiar with it, making the code easier to understand at a glance.
   - **Cons**:
     - Performance: In some scenarios, it may be slower than using the spread operator due to overhead in creating and returning a new array.
     
2. **Push Spread (`array.push(...other)`)**:
   - **Description**: This approach utilizes both the spread operator (`...`) and the `push` method to add elements of another array into an existing array.
   - **Pros**:
     - Performance: In many cases, this method offers better performance since it directly modifies the original array and may lead to fewer intermediate objects being created.
     - Flexibility: Allows adding multiple items to the end of an array in a concise manner.
   - **Cons**:
     - Mutability: This method changes the original array, which can lead to unintended side effects if the array is referenced elsewhere in the code.

### Other Considerations

- **Compatibility**: The `Array.prototype.concat` method is part of the ECMAScript standard for all versions of JavaScript and is widely supported. The spread operator (`...`) was introduced in ES6, so it requires a more modern environment for compatibility.
- **Memory Usage**: Depending on the JavaScript engine optimizations, the memory consumed when using these methods can vary, potentially affecting performance in memory-constrained environments.
- **Profiling**: Developers should consider profiling in the context of their specific application, as performance may vary based on the data size, the number of merges, and the execution context (browser, Node.js, etc.).

### Alternative Methods

In addition to `concat` and `push` with the spread operator, there are a few other methods and patterns for merging arrays:

- **Array spread syntax**: Using `[...array1, ...array2]` creates a new array combining the elements of the two arrays. This is similar to the push spread but focuses on creating a new array.
- **Array.prototype.unshift**: If you need to add elements to the beginning of an array, the `unshift` method can be used, but it also modifies the original array.
- **Modern libraries**: Libraries like Lodash provide utility functions such as `_.concat`, which can extend the functionality and possibly improve performance depending on the use case.

Overall, this benchmark evaluates the speed of different methods for combining arrays, providing insights for developers about optimal practices and performance considerations in JavaScript array manipulation.

Related benchmarks:

Array concat vs spread vs push spread (version: 0)

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

Comparing performance of: Array.prototype.concat vs Push Spread

Created: one month ago by: Guest

Jump to the latest result

Array.prototype.concat

Push Spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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