Benchmark: Array push vs concat vs push + flat to merge to arrays

Tests:

Array.prototype.concat
let params1 = [ "hello", true, 7 ]; const params2 = [ "hello", true, 7 ]; params1 = params1.concat(params2);
push + flat
let params1 = [ "hello", true, 7 ]; const params2 = [ "hello", true, 7 ]; params1.push(params2) params1 = params1.flat()
Push
let params1 = [ "hello", true, 7 ]; const params2 = [ "hello", true, 7 ]; params1.push(...params2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
push + flat
Push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	15614879.0 Ops/sec
push + flat	7002353.0 Ops/sec
Push	63151548.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined by MeasureThat.net evaluates three different methods for merging two arrays in JavaScript: `Array.prototype.concat`, `Array.prototype.push` combined with `flat`, and `Array.prototype.push` with the spread operator. Each method has its own approach to concatenating or merging arrays, leading to variations in performance and potentially use case suitability.

### Test Cases Explained

1. **Array.prototype.concat**
   - **Definition**: 
     ```javascript
     let params1 = [ "hello", true, 7 ];
     const params2 = [ "hello", true, 7 ];
     params1 = params1.concat(params2);
     ```
   - This method merges `params2` into `params1` by creating a new array that contains the elements of both. 
   - **Pros**: 
     - Simplicity: Easy to read and understand.
     - Creates a new array without modifying the original arrays, which can help avoid side effects in functional programming contexts.
   - **Cons**: 
     - May have performance overhead due to the creation of a new array.
     - Not suitable for very large arrays if memory usage is a concern.

2. **push + flat**
   - **Definition**: 
     ```javascript
     let params1 = [ "hello", true, 7 ];
     const params2 = [ "hello", true, 7 ];
     params1.push(params2);
     params1 = params1.flat();
     ```
   - This method first pushes `params2` as a single element into `params1`, and then flattens the array to merge it into a one-dimensional array. 
   - **Pros**: 
     - Conceptually useful if you need to handle arrays of arrays or if preserving structure is initially desired.
   - **Cons**: 
     - The `flat()` method adds additional overhead, as it needs to traverse the array again to flatten it.
     - Less readable and more complex than `concat` for simple merging.

3. **Push with Spread Operator**
   - **Definition**: 
     ```javascript
     let params1 = [ "hello", true, 7 ];
     const params2 = [ "hello", true, 7 ];
     params1.push(...params2);
     ```
   - This method pushes all elements of `params2` into `params1` using the spread operator (`...`).
   - **Pros**: 
     - Efficient and fast, as it directly inserts multiple elements without creating a new array.
     - Maintains the original array structure and is relatively straightforward to read.
   - **Cons**: 
     - It modifies the original `params1` array, which may lead to side effects if that matters in certain functional programming patterns.

### Performance Results

The results indicate a significant difference in execution speed among the methods tested:

- **Push**: 63,151,548 executions per second (best performance).
- **Array.prototype.concat**: 15,614,879 executions per second (higher execution time compared to push).
- **Push + flat**: 7,002,353 executions per second (the slowest approach).

### Other Considerations

- The choice among these methods may depend on whether you prioritize performance, readability, or immutability. As shown in this benchmark, `push` with spread is the most efficient for this particular case, while `concat` offers clearer semantics for simple array merging without mutating the original array.
- For large datasets or in performance-critical applications, `push` with the spread operator is recommended due to its speed.
- It's also worth noting that for merging arrays part of a functional programming paradigm, using `concat` might be preferable to maintain immutability.

### Alternatives

Other alternatives might include:

- **Array.prototype.join**: Typically used for joining array elements into a string, but not for merging arrays.
- **Manual Looping**: Using a `for` loop to create a new array and push each element from both arrays. However, this is usually less concise and can lead to more boilerplate code.
- **Libraries like Lodash**: Functions from utilities like Lodash (e.g., `_.concat`) can provide additional features and chaining capabilities, but come with added overhead due to library loading.

In summary, this benchmark provides valuable insights for developers looking to merge arrays in JavaScript, helping them choose the most suitable method based on performance and their specific application needs.

Related benchmarks:

Array push vs concat vs push + flat to merge to arrays (version: 1)

Comparing performance of: Array.prototype.concat vs push + flat vs Push

Created: 3 months ago by: Guest

Jump to the latest result

Array.prototype.concat

push + flat

Push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):