Benchmark: Adding to an array with push.apply vs spread

Script Preparation code:

var target_array = [];
var new_data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];

Tests:

Adding with Function.prototype.apply on the push method
target_array.push.apply(target_array, new_data)
Adding with spread
target_array.push(...new_data)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Adding with Function.prototype.apply on the push method
Adding with 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/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Adding with Function.prototype.apply on the push method	2177260.8 Ops/sec
Adding with spread	213383.3 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 provided JSON benchmark definition and test cases.

**Benchmark Definition**

The benchmark measures the performance difference between two approaches for adding elements to an array:

1. Using `push.apply()` method with `Function.prototype.apply()`.
2. Using the spread operator (`...`) to add elements to an array.

**Script Preparation Code**

The script preparation code creates an empty array `target_array` and a new array `new_data` containing 20 elements, which will be used for benchmarking:
```javascript
var target_array = [];
var new_data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
```
**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark does not require any specific HTML setup.

**Individual Test Cases**

The two individual test cases are:

1. **"Adding with Function.prototype.apply on the push method"**: This test case creates a new array `new_data` and adds its elements to the `target_array` using `push.apply()` method.
```javascript
target_array.push.apply(target_array, new_data);
```
2. **"Adding with spread"**: This test case creates a new array `new_data` and adds its elements to the `target_array` using the spread operator (`...`).
```javascript
target_array.push(...new_data);
```
**Library Used**

There is no library used in this benchmark, as both test cases only rely on built-in JavaScript methods.

**Special JS Feature or Syntax**

The spread operator (`...`) is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows creating a new array by spreading the elements of an existing array. In this benchmark, it's used to add elements to `target_array` without using `push.apply()`.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **`push.apply()` method**: Pros:
	* More explicit and readable code.
	* Can be faster in older browsers that don't support the spread operator.
Cons:
	* Less concise and may lead to more errors if not used correctly.
	* Can be slower due to the overhead of `apply()`.
2. **Spread Operator (`...`)**: Pros:
	* Concise and readable code.
	* Faster execution, as it avoids the overhead of `apply()`.
Cons:
	* Only supported in modern browsers that support ES6+ features.

**Other Alternatives**

If you wanted to use other methods for adding elements to an array, some alternatives could be:

1. `concat()`: Adds one or more arrays (or values) to the end of an existing array.
```javascript
target_array = target_array.concat(new_data);
```
2. `Array.prototype.push.apply(target_array, new_data);` with a different syntax: `target_array.push(...new_data)`
3. Using a custom function to add elements to the array.

However, these alternatives are not as concise or readable as using the spread operator (`...`) or `push.apply()`.

Related benchmarks:

Adding to an array with push.apply vs spread (version: 0)

Comparing performance of: Adding with Function.prototype.apply on the push method vs Adding with spread

Created: one year ago by: Guest

Jump to the latest result

Adding with Function.prototype.apply on the push method

Adding with 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):