Benchmark: Array.prototype.push vs Array.prototype.push.apply vs concat vs spread

Tests:

Array.prototype.push
var arr1 = Array(100).fill([{n: ''}]) var arr2 = Array(100).fill([{n: ''}]) s = arr1.push(...arr2)
Array.prototype.push.apply
var arr1 = Array(100).fill([{n: ''}]) var arr2 = Array(100).fill([{n: ''}]) s = Array.prototype.push.apply(arr1, arr2)
Concat
var arr1 = Array(100).fill([{n: ''}]) var arr2 = Array(100).fill([{n: ''}]) s = arr1.concat(arr2)
Spread
var arr1 = Array(100).fill([{n: ''}]) var arr2 = Array(100).fill([{n: ''}]) s = [...arr1, ...arr2]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.push
Array.prototype.push.apply
Concat
Spread

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

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.push	872560.4 Ops/sec
Array.prototype.push.apply	797330.4 Ops/sec
Concat	1083304.9 Ops/sec
Spread	741862.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared, and other considerations.

**Benchmark Overview**

The benchmark compares four ways to concatenate two arrays in JavaScript: `Array.prototype.push`, `Array.prototype.push.apply`, `concat`, and `spread`. The test case uses a large array of 100 elements filled with an object, and the goal is to determine which approach is the fastest.

**Library Used**

None. This benchmark doesn't rely on any external libraries.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in this benchmark. However, it's worth noting that the use of `Array.prototype.push` and `Array.prototype.push.apply` relies on the implementation details of these methods in older browsers, which may not be identical to modern implementations.

**Benchmarked Methods**

1. **`Array.prototype.push`**: This method appends elements to the end of an array by calling the `push()` method on each element individually.
2. **`Array.prototype.push.apply`**: This method is similar to `push`, but it takes an array as an argument and applies its values to the current array using the `apply()` method.
3. **`concat()`**: This method returns a new array that contains all elements of the original arrays, effectively concatenating them.
4. **`spread` (also known as rest operator)**: This is a syntax feature in modern JavaScript that allows you to expand an array into individual arguments.

**Comparison**

The test case compares the execution time of each approach:

* `Array.prototype.push` and `push.apply`: These methods are compared, but their performance may vary depending on the browser implementation.
* `concat()`: This method creates a new array, which can lead to slower performance due to increased memory allocation and copy operations.
* `spread`: This method is likely to be the fastest since it avoids creating intermediate arrays and directly updates the original array.

**Pros and Cons**

1. **`Array.prototype.push`**: Fastest in modern browsers with optimized implementations. However, its performance may vary depending on older browser versions.
2. **`Array.prototype.push.apply`**: Similar to `push`, but slower due to the additional overhead of applying an array's values.
3. **`concat()`**: Creates a new array, which can lead to slower performance and increased memory usage.
4. **`spread`**: Likely to be the fastest since it avoids creating intermediate arrays.

**Other Considerations**

* Memory allocation: `concat()` creates a new array, while the other methods update the original array in place, reducing memory overhead.
* Copy operations: `concat()` performs copy operations when merging arrays, which can lead to slower performance.
* Browser implementation: The performance of each approach may vary depending on the browser version and its implementation.

**Alternatives**

If you're looking for alternative ways to concatenate arrays, consider using:

1. **Array.prototype.set()**: Some browsers (e.g., Chrome) support `set()` instead of `push.apply`.
2. **Destructuring assignment**: This syntax feature allows you to extract elements from an array into individual variables.

Keep in mind that the performance differences between these approaches may be negligible for small arrays, but can become significant with large datasets.

Related benchmarks:

Array.prototype.push vs Array.prototype.push.apply vs concat vs spread (version: 6)

Comparing performance of: Array.prototype.push vs Array.prototype.push.apply vs Concat vs Spread

Created: one year ago by: Registered User

Jump to the latest result

Array.prototype.push

Array.prototype.push.apply

Concat

Spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):