Benchmark: js arr funcs - MeasureThat.net

Tests:

spread
const arr1 = Array(100000).fill(Math.random()) const arr2 = Array(100000).fill(Math.random()) arr1.push(...arr2)
concat
const arr1 = Array(100000).fill(Math.random()) const arr2 = Array(100000).fill(Math.random()) let res = arr1.concat(arr2)
push.apply
const arr1 = Array(100000).fill(Math.random()) const arr2 = Array(100000).fill(Math.random()) Array.prototype.push.apply(arr1, arr2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
concat
push.apply

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
spread	125.1 Ops/sec
concat	287.7 Ops/sec
push.apply	130.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of different methods for merging two large arrays in JavaScript. The three approaches compared here are `Array.prototype.concat()`, the spread operator (`...`), and `Function.prototype.apply()` with `Array.prototype.push()`. Each method has its own pros and cons, which can influence the choice of which to use based on specific use cases.

### Test Cases Explained:

1. **Spread Operator (`arr1.push(...arr2)`)**
   - **Benchmark Definition**: `const arr1 = Array(100000).fill(Math.random()); const arr2 = Array(100000).fill(Math.random()); arr1.push(...arr2);`
   - **Test Name**: "spread"
   - **Description**: The spread operator allows an iterable (like an array) to be expanded in places where zero or more arguments are expected. Here, `arr2` is expanded and pushed into `arr1`.
   - **Pros**: 
     - Syntax is concise and readable.
     - It's part of ES6 and is widely adopted in modern JavaScript for array manipulation.
   - **Cons**: 
     - May lead to performance issues with very large arrays as it spreads out the elements into function arguments, leading to potential stack overflow errors for very large datasets.

2. **Array.concat() (`arr1.concat(arr2)`)**
   - **Benchmark Definition**: `const arr1 = Array(100000).fill(Math.random()); const arr2 = Array(100000).fill(Math.random()); let res = arr1.concat(arr2);`
   - **Test Name**: "concat"
   - **Description**: The `concat()` method is used to merge two or more arrays. This method doesn't change the existing arrays but instead returns a new array.
   - **Pros**: 
     - Safe for handling large arrays, as it doesn't manipulate the structures in-place without the need for exhaustive memory allocations.
   - **Cons**: 
     - Produces a new array which could lead to more memory usage and overhead, especially if one intends to work in-place.

3. **push.apply() (`Array.prototype.push.apply(arr1, arr2)`)**
   - **Benchmark Definition**: `const arr1 = Array(100000).fill(Math.random()); const arr2 = Array(100000).fill(Math.random()); Array.prototype.push.apply(arr1, arr2);`
   - **Test Name**: "push.apply"
   - **Description**: This method uses `Function.prototype.apply()` to call `push` with `arr1` as the context and `arr2` as the argument, effectively merging the two arrays.
   - **Pros**: 
     - Efficient for large arrays as it pushes elements directly onto `arr1` without creating a new array.
     - Does not risk a stack overflow.
   - **Cons**: 
     - Slightly less readable than the other methods, as it uses a more functional programming style which may be less intuitive for beginners.

### Results Overview:
The benchmark results show execution speeds for each approach as follows:
- **Concat**: 287.67 executions per second
- **Push.apply**: 129.97 executions per second
- **Spread**: 125.13 executions per second

From the results, the `concat` method performs significantly better in this test case than the other two. This may be influenced by the particular implementation in the JavaScript engine of the browser used for testing (Chrome in this case).

### Other Considerations and Alternatives:
While these methods are prominent for merging arrays in JavaScript, it is important to consider the context in which they are applied. For small arrays, operations may seem to perform similarly; however, as array sizes grow larger, the differences in performance become more pronounced.

**Other Alternatives:**
- Using `for` loops or `forEach` for manual merging may provide even better performance in specific circumstances, though they require more code and less declarative intent.
- Libraries like Lodash provide utility functions like `_.concat()` that can offer additional functionality and safety checks, which can be beneficial when working with complex data structures.

Choosing the right method will depend not only on performance but also on the context of usage, maintainability, and personal or team coding standards. When working in performance-sensitive applications, testing in the specific environment and data context will yield the best results.

Related benchmarks:

js arr funcs (version: 2)

Comparing performance of: spread vs concat vs push.apply

Created: 2 months ago by: Registered User

Jump to the latest result

spread

concat

push.apply

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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