Benchmark: Array.prototype.slice vs spread operator

Tests:

Array.prototype.slice
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].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 month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Browser/OS: Chrome 145 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	106267248.0 Ops/sec
spread operator	80148416.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 test case and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing two approaches to create a shallow copy of an array:

1. **Array.prototype.slice()**: This method returns a shallow copy of a portion of an array, leaving the rest intact. It takes two arguments: the start index (inclusive) and the end index (exclusive).
2. **Spread Operator (`...`)**: This is a new syntax introduced in ECMAScript 2015 that allows creating a new array by spreading the elements of an existing array.

**Options being compared**

The test case is comparing these two approaches for two specific scenarios:

* Creating a shallow copy of a single-element array with different data types (e.g., string, boolean, number).
* Creating a shallow copy of a multi-element array with different data types.

**Pros and Cons**

* **Array.prototype.slice()**:
	+ Pros: widely supported, has been around for a long time, and is easy to implement.
	+ Cons: can be slower than the spread operator, especially for large arrays, since it requires additional bookkeeping steps.
* **Spread Operator (`...`)**:
	+ Pros: faster than `slice()` for large arrays, as it only creates a new array reference without modifying the original array. It's also more concise and readable.
	+ Cons: not supported in older browsers or JavaScript engines that don't implement ES6 syntax.

**Library usage**

In this test case, there is no explicit library being used. However, some libraries might provide additional functionality or optimizations for these operations.

**Special JS features/syntax**

The spread operator (`...`) is a new syntax introduced in ECMAScript 2015. It's supported by most modern browsers and JavaScript engines, but may not work in older environments.

**Other alternatives**

Before the spread operator was introduced, developers used to use the `Array.prototype.concat()` method or `Array.prototype.slice().slice()` (yes, you read that right) to create shallow copies of arrays. These approaches can be slower than the spread operator and might require more code.

It's worth noting that modern JavaScript engines often optimize these operations under the hood, so the actual performance difference between these methods may vary depending on the specific implementation and use case.

Related benchmarks:

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

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

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

Created: 8 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):