Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
string Array.prototype.slice vs spread operator
(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
Jump to the latest result
Tests:
Array.prototype.slice
var params = "Abc 012..## 10cbA"; var other = params.slice();
spread operator
var params = "Abc 012..## 10cbA"; 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:
3 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0
Browser/OS:
Chrome 143 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=624088" width="100%" height="500px"></iframe>
Test name
Executions per second
Array.prototype.slice
57845868.0 Ops/sec
spread operator
7502173.0 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark compares two methods of creating a copy of a string in JavaScript: the traditional `Array.prototype.slice()` method and the newer ES6 spread operator (`[...]`). ### Test Description 1. **Array.prototype.slice**: - **Implementation**: `var other = params.slice();` - This method creates a shallow copy of the entire array (or string, when used in the context of strings) by slicing it from the start to the end. - **Performance Result**: 68,518,248 executions per second. 2. **Spread Operator**: - **Implementation**: `var other = [...params];` - The spread operator creates a new array by expanding (or spreading) the elements of an iterable (in this case, the string). It effectively creates a copy of the string by transforming it into an array of characters. - **Performance Result**: 9,299,561 executions per second. ### Pros and Cons #### Array.prototype.slice: - **Pros**: - Well-established method, familiar to most JavaScript developers. - High performance in this benchmark scenario, demonstrated by a significantly higher execution rate. - **Cons**: - Can be less intuitive for beginners; conceptually, it is traditionally seen as related to arrays, which may confuse those who are primarily working with strings. #### Spread Operator: - **Pros**: - Provides a clean and concise syntax that many developers find easier to read and understand. - More versatile as it can be used with any iterable, not just arrays or strings. - **Cons**: - Performance is notably lower in this benchmark (by an order of magnitude), making it less preferable when performance is critical. - Slightly more modern and may not be as universally supported in very old environments (although most browsers now support ES6). ### Other Considerations - **Browser Compatibility**: While the spread operator is widely supported in most modern browsers, developers need to be careful about compatibility with legacy systems. - **Use Cases**: Depending on the use case, the choice may not solely be based on performance but also on readability and maintainability of code. For example, using the spread operator can be more semantically appropriate when working with iterables beyond just copying strings or arrays. - **Performance Needs**: If performance is a key concern, especially in tight loops or performance-sensitive codebases, developers might prefer `Array.prototype.slice()`, as indicated by the tested results. ### Alternatives - **String.prototype.substring()**: While not directly creating copies of a string, this method can be used to extract parts of a string. - **String.prototype.substr()**: A similar method to `substring()` that can also copy parts of a string, but is less commonly used in modern development. - **Array.from()**: This method could also be used to create a new array from a string, akin to the spread operator, but its performance has not been directly compared in this benchmark. In summary, while the spread operator offers a modern approach with clearer semantics, `Array.prototype.slice()` demonstrates superior performance for this specific task, highlighting the trade-offs between code readability and execution speed in JavaScript.
Related benchmarks:
Array.prototype.slice vs spread operator fixed
Array.prototype.slice vs spread operator 2 2
Array.prototype.slice vs spread operator 56
Array.prototype.slice vs spread operator fixed 2
Array.prototype.slice vs spread operator1
Array.prototype.slice vs spread operator fix
Array.prototype.slice vs spread operator 20
Array.prototype.slice vs spread operator!111
Fixed Array.prototype.slice vs spread operator
Array.prototype.slice vs spread operator 73
Comments
Confirm delete:
Do you really want to delete benchmark?