Benchmark: Array push spread vs Array.prototype.push.apply vs For loop

Script Preparation code:

var arr = [];
var elementsToPush = [];
var i = 0;

for (i = 0; i < 1000; i++) {
	arr[i] = { a: 42 };
}

for (i = 0; i < 10; i++) {
	elementsToPush[i] = { a: 42 };
}

Tests:

spread operator
arr = []; arr.push(...elementsToPush)
Apply
arr = []; Array.prototype.push.apply(arr, elementsToPush)
For loop
arr = []; for (i = 0; i < 10; i++) { arr.push(elementsToPush[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread operator
Apply
For loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 days ago)

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

Browser/OS: Chrome 153 on Mac OS X 10.15.7

View result in a separate tab

spread operator

10.8M/s

Apply

10.2M/s

For loop

2.3M/s

View exact numbers

Test name	Executions per second
✓ spread operator	10,773,324 Ops/sec
Apply	10,216,847 Ops/sec
For loop	2,270,924 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Description**

The benchmark compares three different approaches to add elements to an array:

1. Using the spread operator (`arr.push(...elementsToPush)`)
2. Using `Array.prototype.push.apply(arr, elementsToPush)`
3. Using a traditional `for` loop to push each element individually (`arr.push(elementsToPush[i])`)

**Library and Purpose**

The only library used in this benchmark is `Array.prototype.push.apply()`, which is a method on the Array prototype that applies an array of values to another array, effectively merging them.

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. It's purely about comparing different approaches to add elements to an array.

**Benchmark Preparation Code**

The preparation code creates an empty array `arr` and another array `elementsToPush`, then uses a `for` loop to populate the first 1000 elements of `arr` with objects, followed by a similar loop to populate the first 10 elements of `elementsToPush`. The script is prepared in JavaScript.

**Comparison of Approaches**

Here's a brief overview of each approach:

1. **Spread Operator (`arr.push(...elementsToPush)`)**
	* Pros: Concise and readable syntax, easy to implement.
	* Cons: Can be slower than other methods for large arrays, as it creates a new array and then pushes elements into the original array.
2. **`Array.prototype.push.apply(arr, elementsToPush)`** (also known as "apply" method)
	* Pros: Can be faster than spread operator for large arrays, as it uses native code to avoid creating a new array.
	* Cons: Less readable syntax, and may not work in older browsers that don't support the `Array.prototype` prototype chain.
3. **Traditional `for` loop (`arr.push(elementsToPush[i])`)**
	* Pros: Fastest method, as it avoids any additional operations like creating a new array or applying an array to another array.
	* Cons: Most verbose and less readable syntax.

**Other Alternatives**

If you need to add elements to an array, other alternatives include:

1. Using the `concat()` method: `arr = arr.concat(elementsToPush)`
2. Using `Set` data structure: Note that this approach creates a new object with duplicate keys and is not suitable for arrays.
3. Using `Array.from()` method (newer browsers only): `arr = Array.from(arr, element => element);`

In conclusion, the choice of approach depends on your specific use case and priorities. If you need concise syntax and don't mind potential performance trade-offs, the spread operator is a good option. For large arrays or performance-critical code, using the `Array.prototype.push.apply()` method may be more suitable. Traditional `for` loops are generally the fastest but come at the cost of readability and conciseness.

Array push spread vs Array.prototype.push.apply vs For loop (version: 1)

Compare using array spread and using apply or for loop

Comparing performance of: `spread operator vs Apply vs For loop`

Created: 2 years ago by: Registered User

Go to the latest result

spread operator

Apply

For loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array push spread vs Array.prototype.push.apply vs For loop (version: 1)

Compare using array spread and using apply or for loop

Comparing performance of: spread operator vs Apply vs For loop

Created: 2 years ago by: Registered User

Go to the latest result

spread operator

Apply

For loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `spread operator vs Apply vs For loop`