Benchmark: Spread operator vs Array.prototype.apply vs Array.prototype.concat

HTML Preparation code:

<div>Demo</div>

Script Preparation code:

console.log('js prep');

Tests:

Spread operator
var a = [1, 2,5 ,3, 44, 6, 7, 8, ,9, 10, 11, 12, 13]; var b = [14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]; var c = [...a, ...b];
Array.push.apply
var a = [1, 2,5 ,3, 44, 6, 7, 8, ,9, 10, 11, 12, 13]; var b = [14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]; var c = a.push.apply(a, b)
concat
var a = [1, 2,5 ,3, 44, 6, 7, 8, ,9, 10, 11, 12, 13]; var b = [14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]; var c = a.concat(b);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread operator
Array.push.apply
concat

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark compares three different methods to concatenate two arrays: the spread operator (`...`), `Array.prototype.apply()`, and `Array.prototype.concat()`.

**Options Compared**

1. **Spread Operator**: Using the spread operator (`...`) to concatenate two arrays.
2. **`Array.prototype.push.apply()`**: Using the `push()` method of an array to add elements from another array.
3. **`Array.prototype.concat()`**: Using the `concat()` method of an array to add one or more arrays.

**Pros and Cons**

* **Spread Operator**:
	+ Pros: concise, efficient, and modern syntax.
	+ Cons: may not be supported in older browsers or environments, can lead to slower performance due to string concatenation.
* **`Array.prototype.push.apply()`**: Pros: widely supported across all browsers, can be faster than spread operator for large arrays. Cons: less readable, more complex syntax, and can lead to errors if not used correctly.
* **`Array.prototype.concat()`**: Pros: widely supported, efficient, and easy to read. Cons: slightly slower than `push.apply()`, may require additional array creation.

**Library and Syntax**

The benchmark does not use any external libraries or specific JavaScript features. The syntax used is standard ECMAScript 2015 (ES6) syntax for the spread operator and modern array methods.

**Considerations**

* When working with large arrays, the spread operator might be slower than `push.apply()` due to string concatenation.
* For most use cases, `Array.prototype.concat()` is a good choice, but it may require additional array creation.
* The benchmark highlights the importance of considering the trade-offs between conciseness, readability, and performance when choosing an array method.

**Alternatives**

Other alternatives for concatenating arrays include:

1. **`Array.prototype.reduce()`**: Using `reduce()` to concatenate two arrays by accumulating elements in a new array.
2. **`Array.prototype.forEach()`**: Using `forEach()` to iterate over the first array, push each element to a new array, and then return the new array.

Keep in mind that these alternatives may not be as efficient or readable as the methods compared in this benchmark.

Latest run results:

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

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

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spread operator	1878251.0 Ops/sec
Array.push.apply	27890914.0 Ops/sec
concat	8721913.0 Ops/sec

Related benchmarks:

Spread operator vs Array.prototype.apply vs Array.prototype.concat (version: 0)

Comparing performance of: Spread operator vs Array.push.apply vs concat

Created: 8 months ago by: Guest

Jump to the latest result

Spread operator

Array.push.apply

concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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