Benchmark: Array.prototype.slice vs spread operator perf

Tests:

Array.prototype.slice
var params = [ "hello", true, 7 ]; var other = params.slice();
spread operator
var params = [ "hello", true, 7 ] var other = [ ...params ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	51520644.0 Ops/sec
spread operator	37877680.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 JSON benchmark definition and test cases.

**What is being tested?**

The benchmark compares two ways to create a shallow copy of an array: the traditional `Array.prototype.slice()` method and the new ES6 spread operator (`[...params]`).

**Options compared:**

* Traditional approach: Using `Array.prototype.slice()`
	+ Pros:
		- Wide browser support (since it's part of the JavaScript standard library)
		- Generally efficient, especially for small arrays
	+ Cons:
		- Can be slower than the spread operator for large arrays due to the overhead of creating a new array and slicing the original array
* Spread operator approach: Using `[...params]`
	+ Pros:
		- More concise and expressive than the traditional approach
		- Often faster than `slice()` for large arrays, since it avoids creating a new array object
	+ Cons:
		- May not work correctly with certain types of data (e.g., symbols, sets)
		- Has been around for a while, so its performance might be optimized in some browsers

**Other considerations:**

* The test cases use simple arrays with only three elements. In real-world scenarios, the spread operator can handle more complex array structures.
* The benchmark doesn't account for variations in JavaScript engine implementations or specific browser optimizations.

**Library usage:**

None of the test cases rely on external libraries.

**Special JS feature/syntax:**

The spread operator (`[...params]`) is a new JavaScript syntax introduced in ES6. It's a concise way to create an array from an iterable (like an array, string, or object).

**Benchmark preparation code and HTML preparation code:**

The JSON benchmark definition doesn't provide any specific preparation code for the test cases. This suggests that the test cases are self-contained and can be run directly in the browser.

**Other alternatives:**

If you want to compare other methods for creating shallow copies of arrays, you could consider adding additional test cases for:

* `Array.prototype.concat()`
* `Object.assign()` or `Array.prototype.slice.call()`
* A library-based approach using a utility function (e.g., Lodash's `_.slice()`)

Related benchmarks:

Array.prototype.slice vs spread operator perf (version: 0)

Compare the new ES6 spread operator with the traditional slice() method

Comparing performance of: Array.prototype.slice vs spread operator

Created: 7 years ago by: Guest

Jump to the latest result

Array.prototype.slice

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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