Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.slice vs spread operator copy 5
(version: 1)
Compare the new ES6 spread operator with the traditional slice() method
Comparing performance of:
Array.prototype.slice vs spread operator
Created:
9 months ago
by:
Guest
Jump 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:
9 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Browser/OS:
Chrome 138 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=614791" width="100%" height="500px"></iframe>
Test name
Executions per second
Array.prototype.slice
105338184.0 Ops/sec
spread operator
77035352.0 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated 9 months ago):
The benchmark provided compares two different methods for creating a shallow copy of an array in JavaScript: `Array.prototype.slice` and the ES6 spread operator (`...`). Both methods serve the same purpose but can have different performance characteristics depending on the implementation and context of use. ### Options Compared 1. **Array.prototype.slice** - **Test Name**: `Array.prototype.slice` - **Benchmark Definition**: `var params = [ "hello", true, 7 ]; var other = params.slice();` - This method creates a shallow copy of the array by invoking the `slice()` method with no arguments. This copies all elements from the original array into a new array. 2. **Spread Operator** - **Test Name**: `spread operator` - **Benchmark Definition**: `var params = [ "hello", true, 7 ]; var other = [ ...params ];` - The spread operator (`...`) allows an iterable (like an array) to be expanded in places where zero or more arguments or elements are expected. In this case, it expands the `params` array into a new array literal. ### Pros and Cons #### Array.prototype.slice **Pros**: - Very well-documented and widely used method, compatible with older JavaScript environments. - Straightforward syntax that conveys the intent of array copying clearly. **Cons**: - May perform slower in certain environments compared to newer methods like the spread operator, especially with larger arrays. #### Spread Operator **Pros**: - More concise and can be easier to read, especially in cases of complex expressions or nested structures. - Allows copying not just arrays but also other iterables, making it more versatile. **Cons**: - Introduced in ES6, so it may not be supported in very old JavaScript environments, though this is becoming less of a concern as modern browsers are widely adopted. - Depending on the implementation, there may be performance implications in specific scenarios, although generally, it is optimized for the common cases. ### Benchmark Results From the benchmark results, we can see the following performance metrics: - `Array.prototype.slice`: 105,338,184 executions per second - `Spread operator`: 77,035,352 executions per second Here, `Array.prototype.slice` performs better than the spread operator in this specific test case, executing over 105 million times per second compared to 77 million times for the spread operator. ### Other Considerations - **Performance**: The performance difference between these two methods could vary based on the size of the array being copied and the specific JavaScript engine (e.g., Chrome, Firefox, etc.) being used. - **Context**: Depending on the coding standards in a project, team preferences, or the compatibility requirements of your application, one method might be favored over the other. ### Alternatives Apart from the `Array.prototype.slice` and spread operator methods, alternative approaches to copy arrays include: - **`Array.from()`**: This static method creates a new, shallow-copied Array instance from an array-like or iterable object. ```javascript var other = Array.from(params); ``` - **`concat()` Method**: Using `concat()` to concatenate an empty array with the original array can also achieve a shallow copy: ```javascript var other = [].concat(params); ``` These methods may have their use cases and performance characteristics, so it's beneficial to consider them based on the context of use in your projects.
Related benchmarks:
Array.prototype.slice vs spread operator (correct)
Array.prototype.slice vs spread operator fixed
Array.prototype.slice vs spread operator copy
Array.prototype.slice vs spread operator copy performance
Array.prototype.slice vs spread operator1
Array.prototype.slice vs spread operator corrected
Array.prototype.slice vs spread operator (updated)
Array.prototype.slice vs spread operator to copy array
Array.prototype.slice vs spread operator 20
Array.prototype.slice vs spread operator new
Comments
Confirm delete:
Do you really want to delete benchmark?