Benchmark: Array.prototype.slice vs spread operator -- multiple cases

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

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

Comparing performance of: Array.prototype.slice -- long -- no additions vs spread operator -- long -- no additions vs Array.prototype.slice -- long -- add another vs spread operator -- long -- add another vs Array.prototype.slice -- short -- no additions vs spread operator -- short -- no additions vs Array.prototype.slice -- short -- add a few vs spread operator -- short -- add a few

Created: 4 years ago by: Guest

Jump to the latest result

Script Preparation code:

var longArray = '0'.repeat(30000).split('').map(x => Math.random())
var short = [1, 2, 3]

Tests:

Array.prototype.slice -- long -- no additions
var other = longArray.slice()
spread operator -- long -- no additions
var other = [ ...longArray ]
Array.prototype.slice -- long -- add another
var other = longArray.slice().concat(longArray)
spread operator -- long -- add another
var other = [ ...longArray, ...longArray ]
Array.prototype.slice -- short -- no additions
var other = short.slice()
spread operator -- short -- no additions
var other = [...short]
Array.prototype.slice -- short -- add a few
var other = short.slice().concat([5, 6])
spread operator -- short -- add a few
var other = [...short, 5, 6]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice -- long -- no additions
spread operator -- long -- no additions
Array.prototype.slice -- long -- add another
spread operator -- long -- add another
Array.prototype.slice -- short -- no additions
spread operator -- short -- no additions
Array.prototype.slice -- short -- add a few
spread operator -- short -- add a few

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Measuring performance differences between `Array.prototype.slice` and the spread operator in JavaScript is crucial, especially when dealing with large arrays.

**What are being compared?**

The provided benchmark compares two approaches to create a copy of an array:

1. **`Array.prototype.slice()`**: A traditional method for creating a shallow copy of an array.
2. **Spread Operator (`...`)**: A new feature introduced in ES6 that allows creating a new array by spreading the elements of an existing array.

**Options and their pros/cons:**

### `Array.prototype.slice()`

Pros:

* Widely supported across browsers and Node.js versions
* Well-documented and easy to understand

Cons:

* Creates a shallow copy, which may not be suitable for objects with nested arrays or complex data structures.
* Can be slower than the spread operator for very large arrays.

### Spread Operator (`...`)

Pros:

* More efficient than `Array.prototype.slice()` for very large arrays
* Creates a deep copy, making it suitable for objects with nested arrays or complex data structures

Cons:

* Less widely supported across browsers and Node.js versions (although improving)
* May have performance implications due to the creation of new arrays.

**Library and syntax**

There are no libraries involved in this benchmark. The spread operator is a built-in JavaScript feature introduced in ES6.

**Special JS features or syntax**

The spread operator uses the `...` syntax, which is not specific to any particular browser or Node.js version. However, older browsers may not support this syntax yet.

**Other alternatives**

In addition to the spread operator, other methods for creating an array copy exist:

* `Array.from()`: Creates a new array from an iterable.
* `Array.prototype.concat()`: Concatenates one or more arrays and returns a new array.

However, these methods are not directly comparable to the spread operator in terms of performance and simplicity.

**Benchmarking results**

The provided benchmark results show that:

* For short arrays (e.g., `[1, 2, 3]`), the `Array.prototype.slice()` method is faster.
* For long arrays (e.g., `longArray` with 30,000 elements), the spread operator is significantly faster.

These results suggest that when dealing with large datasets, the spread operator may be a more efficient choice. However, for smaller datasets or specific use cases where simplicity and readability are paramount, `Array.prototype.slice()` might still be a better option.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

Browser/OS: Chrome 83 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice -- long -- no additions	9211.0 Ops/sec
spread operator -- long -- no additions	10279.6 Ops/sec
Array.prototype.slice -- long -- add another	2828.9 Ops/sec
spread operator -- long -- add another	1400.8 Ops/sec
Array.prototype.slice -- short -- no additions	10097662.0 Ops/sec
spread operator -- short -- no additions	9589077.0 Ops/sec
Array.prototype.slice -- short -- add a few	3433518.5 Ops/sec
spread operator -- short -- add a few	7679565.5 Ops/sec

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.slice -- long -- no additions

spread operator -- long -- no additions

Array.prototype.slice -- long -- add another

spread operator -- long -- add another

Array.prototype.slice -- short -- no additions

spread operator -- short -- no additions

Array.prototype.slice -- short -- add a few

spread operator -- short -- add a few

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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