Benchmark: Array.slice vs Array.concat vs Spread operator v2

Script Preparation code:

window.testArray = [1, 'a', undefined, null, false, { a: 123 }, [1, 2, 3]];
window.arraySlice = Array.prototype.slice;
window.arrayConcat = Array.prototype.concat;

Tests:

Array.prototype.slice [direct call]
const a = window.testArray.slice(0);
Array.prototype.slice [saved function call]
const a = arraySlice.call(window.testArray);
Array.prototype.concat [direct call]
const a = window.testArray.concat([]);
Array.prototype.concat [saved function call]
const a = window.arrayConcat.call(window.testArray, []);
Spread operator
const a = [...window.testArray];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice [direct call]
Array.prototype.slice [saved function call]
Array.prototype.concat [direct call]
Array.prototype.concat [saved function call]
Spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:81.0) Gecko/20100101 Firefox/81.0

Browser/OS: Firefox 81 on Mac OS X 10.14

View result in a separate tab

Test name	Executions per second
Array.prototype.slice [direct call]	4333405.0 Ops/sec
Array.prototype.slice [saved function call]	3435927.5 Ops/sec
Array.prototype.concat [direct call]	3303569.2 Ops/sec
Array.prototype.concat [saved function call]	2131310.2 Ops/sec
Spread operator	3454584.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark is testing three different approaches to create an array:

1. `Array.slice()`: Directly calls the `slice()` method on the original array (`window.testArray`).
2. `Array.concat()`: Directly calls the `concat()` method on the original array (`window.testArray`) with an empty array as its argument.
3. The Spread Operator (ES6+): Creates a new array by spreading the elements of the original array (`window.testArray`) using the syntax `const a = [...window.testArray];`.

**Options being compared**

The benchmark is comparing the execution time and performance of each approach.

* Direct call to `Array.slice()`:
	+ Pros: Simple, straightforward way to create an array slice.
	+ Cons: May have slower performance due to the method's implementation details.
* Saved function call to `Array.slice()`: Using a saved version of the `slice()` method.
	+ Pros: Can potentially be faster than the direct call, as it might be optimized by the browser or the JavaScript engine.
	+ Cons: Requires additional setup and may not always lead to better performance.
* Direct call to `Array.concat()`: Directly calls the `concat()` method on the original array (`window.testArray`) with an empty array as its argument.
	+ Pros: Simple, straightforward way to create a new array by concatenating the original array with another array.
	+ Cons: May have slower performance due to the method's implementation details.
* Saved function call to `Array.concat()`: Using a saved version of the `concat()` method.
	+ Pros: Can potentially be faster than the direct call, as it might be optimized by the browser or the JavaScript engine.
	+ Cons: Requires additional setup and may not always lead to better performance.
* Spread Operator (ES6+): Creates a new array by spreading the elements of the original array (`window.testArray`) using the syntax `const a = [...window.testArray];`.
	+ Pros: Modern, efficient way to create an array from another iterable or array-like object.
	+ Cons: Requires support for the ES6 Spread Operator feature.

**Libraries and special JS features**

There are no explicit libraries mentioned in this benchmark. However, it does use JavaScript features that might not be supported by all browsers:

* The Spread Operator (ES6+): Required in modern browsers, but may not work in older versions.
* Arrow functions (`=>`): Used implicitly in the saved function calls to `Array.slice()` and `Array.concat()`.
* Template literals (`\r\n`) used for formatting the script preparation code.

**Other alternatives**

There are other ways to create an array slice or concatenate an array, such as using loops or recursive functions. However, these approaches are generally less efficient and more verbose than using the methods and spread operator tested in this benchmark.

For example:

* Using a loop to create an array slice:
```javascript
const result = [];
for (let i = 0; i < window.testArray.length; i++) {
  result.push(window.testArray[i]);
}
```
* Using recursive functions or closures to concatenate arrays is generally less efficient and more verbose than using the `concat()` method.

In summary, this benchmark tests the performance of different approaches to create an array slice and concatenate an array, including direct calls, saved function calls, and the Spread Operator.

Related benchmarks:

Array.slice vs Array.concat vs Spread operator v2 (version: 0)

Comparing performance of: Array.prototype.slice [direct call] vs Array.prototype.slice [saved function call] vs Array.prototype.concat [direct call] vs Array.prototype.concat [saved function call] vs Spread operator

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.slice [direct call]

Array.prototype.slice [saved function call]

Array.prototype.concat [direct call]

Array.prototype.concat [saved function call]

Spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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