Benchmark: Array concat vs spread operator vs push large array

Tests:

Array.prototype.concat
var params = Array(1000); var array = Array(1000); var other = array.concat(params);
spread operator
var params = Array(1000); var array = Array(1000); var other = [ ...array, ...params ]
Push
var params = Array(1000); var array = Array(1000); var other = array.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:

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/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	861902.5 Ops/sec
spread operator	188794.8 Ops/sec
Push	317960.3 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you provided is designed to compare three different methods in JavaScript for combining arrays: the traditional `Array.prototype.concat` method, the ES6 spread operator (`...`), and the `Array.prototype.push` method. Each option has its own methodology for appending or merging arrays, and the benchmark measures the performance of each approach in terms of executions per second.

### Options Compared:

1. **Array.prototype.concat**
   - **Description**: This is a traditional method for merging two or more arrays. It returns a new array containing the elements of the original arrays concatenated together.
   - **Pros**:
     - Simple and readable syntax.
     - Returns a new array, leaving the original arrays unchanged, which can be beneficial for immutability and avoiding side effects.
   - **Cons**:
     - May be slower than more direct methods, particularly with very large arrays, as it creates a copy of the contents.

2. **Spread Operator (`...`)**
   - **Description**: The spread operator is a syntactic feature introduced in ES6 that allows an iterable (like an array) to be expanded or spread in places where zero or more elements are expected. In this case, it's used to combine two arrays.
   - **Pros**:
     - Provides a concise and intuitive syntax, making it easier to read and write.
     - Can be used in various contexts beyond just array concatenation (e.g., combining objects).
   - **Cons**:
     - Like `concat`, it also creates a new array, which could be less memory-efficient than modifying an existing array directly if performance is a critical concern.

3. **Array.prototype.push**
   - **Description**: This method adds one or more elements to the end of an existing array and returns the new length of the array.
   - **Pros**:
     - Directly modifies the original array, which may be more efficient in terms of memory usage as it does not create a new array.
     - Can be faster for adding items to an existing array, especially if you're adding elements one at a time.
   - **Cons**:
     - Does not return a new array, which could lead to mutable state issues if the original array is used elsewhere.
     - Not suitable for merging multiple arrays into a new one without the use of `apply` or the spread operator for multiple arguments.

### Benchmark Results:
The benchmark results indicate the number of executions per second achieved by each method in Chrome 124 on macOS:

- **Array.prototype.concat**: 861,902.5 executions/second
- **Push**: 317,960.34 executions/second
- **Spread Operator**: 188,794.80 executions/second

### Considerations:
The choice between these methods often depends on the specific requirements of your application. If immutability and readability are priorities, `concat` or the spread operator might be preferable. If performance is essential and array mutation is acceptable, then `push` could be a better option.

### Alternatives:
Other alternatives to these methods could include libraries like Lodash, which offers utilities for manipulating arrays, or native JavaScript functions like `Array.from()` for converting array-like objects to arrays. However, they're not specified in this benchmark. Using a library like Lodash can also provide enhanced features for more complex array manipulations but may introduce additional overhead due to the library's size and complexity.

In summary, this benchmark effectively illustrates the performance characteristics of different array combination techniques in JavaScript and emphasizes the trade-offs associated with each method.

Related benchmarks:

Array concat vs spread operator vs push large array (version: 1)

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: one year 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

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