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

Latest run results:

Run details: (Test run date: 2 years 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

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.

**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.

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: 2 years ago by: Guest

Jump to the latest result

Spread operator

Array.push.apply

concat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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