Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.slice vs spread operator copy
(version: 0)
Compare the new ES6 spread operator with the traditional slice() method
Comparing performance of:
Array.prototype.slice vs spread operator
Created:
6 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
Array.prototype.slice
spread operator
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36
Browser/OS:
Chrome Mobile 120 on Android
View result in a separate tab
Embed
Embed Benchmark Result
Array.prototype.slice
119.4M/s
spread operator
71.1M/s
View exact numbers
Test name
Executions per second
✓
Array.prototype.slice
119,386,520 Ops/sec
spread operator
71,111,560 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided benchmark. **What is being tested?** The benchmark compares two approaches to create a copy of an array: the traditional `Array.prototype.slice()` method and the new ES6 spread operator (`[ ...params ]`). The test case creates an array `params` with three elements: a string, a boolean, and a number. It then measures the execution time for each approach to create a copy of this array. **Options compared** The benchmark is comparing two options: 1. **Array.prototype.slice()**: This method returns a shallow copy of the original array. It takes an optional start and end index as arguments. 2. **Spread operator (`[ ...params ]`)**: This operator creates a new array by spreading the elements of the original array into new positions. **Pros and Cons** 1. `Array.prototype.slice()`: * Pros: + Wide browser support (since 1998) + Well-documented * Cons: + Can be slow for large arrays due to the overhead of creating a new array object 2. Spread operator (`[ ...params ]`): * Pros: + Fast and efficient, especially for large arrays + Simple and concise syntax * Cons: + Requires modern browsers that support ES6 (2009) + May not be supported in older browsers **Library usage** In the benchmark, there is no explicit library usage. However, it's worth noting that the spread operator relies on the `Array.prototype.slice()` method internally to create a shallow copy of the array. **Special JS feature or syntax** The benchmark uses the ES6 spread operator (`[ ...params ]`), which was introduced in 2015 as part of the ECMAScript 2015 standard. This feature is supported by modern browsers and Node.js versions starting from ES6. **Other alternatives** If you need to support older browsers that don't support the spread operator, you can use alternative approaches: 1. **Array.prototype.slice()**: As mentioned earlier, this method is widely supported but may be slower for large arrays. 2. **Array.prototype.concat()**: This method creates a new array by concatenating multiple arrays or iterables. You can use `concat()` with an initial value to create a copy of the original array: `[ ...params ].concat()`. 3. **Array.from()**: If you're using modern browsers, you can use `Array.from()` with an iterable (in this case, the string `'hello'`) to create a new array: `Array.from(['hello'], String)`. These alternatives may have different performance characteristics and are not as concise as the spread operator.
Related benchmarks
Array.prototype.slice vs spread operator.
Array.prototype.slice vs spread operator With slightly bigger array
Array.prototype.slice vs spread operator on a bigger array
Array.prototype.slice vs spread operator - large array 100000
Comments
Confirm delete:
Do you really want to delete benchmark?