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:
one year 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:
one year 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>
Array.prototype.slice
105.3M/s
spread operator
77.0M/s
View exact numbers
Test name
Executions per second
✓
Array.prototype.slice
105,338,184 Ops/sec
spread operator
77,035,352 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year 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 copy
Array.prototype.slice vs spread operator new
Comments
Confirm delete:
Do you really want to delete benchmark?