Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.slice vs spread operator With slightly bigger array
(version: 0)
Compare the new ES6 spread operator with the traditional slice() method
Comparing performance of:
slice operator vs spread operator
Created:
5 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var params = Array(100).fill('Hello World');
Tests:
slice operator
var other = params.slice();
spread operator
var other = [ ...params ]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
slice operator
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/129.0.0.0 Safari/537.36
Browser/OS:
Chrome 129 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=561388" width="100%" height="500px"></iframe>
slice operator
15.9M/s
spread operator
6.6M/s
View exact numbers
Test name
Executions per second
✓
slice operator
15,912,808 Ops/sec
spread operator
6,572,070 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what is being tested in the provided JSON benchmark. **Benchmark Overview** The benchmark compares two methods for creating a copy of an array: the traditional `slice()` method and the new ES6 spread operator (`[ ...params ]`). **Options Being Compared** There are two options being compared: 1. **Traditional `slice()` method**: This method creates a shallow copy of an array by specifying a start index, end index, and step value. ```javascript var other = params.slice(); ``` 2. **ES6 spread operator (`[ ...params ]`)**: This method creates a new array by spreading the elements of the original array into a new array. **Pros and Cons** Here are some pros and cons of each approach: 1. **Traditional `slice()` method** * Pros: + Can be faster for small arrays or arrays with few unique elements. + More predictable and easier to understand. * Cons: + Creates a shallow copy, which can lead to issues when dealing with objects that contain references. + Less intuitive than the spread operator for large arrays. 2. **ES6 spread operator (`[ ...params ]`)** * Pros: + Creates a new array and avoids modifying the original array. + More concise and readable for large arrays. + Can be faster for large arrays due to its optimized implementation. * Cons: + May have performance issues when dealing with very large arrays (not tested in this benchmark). + Less intuitive than `slice()` for small arrays or arrays with few unique elements. **Library and Special JS Feature** In this benchmark, the following library is used: None. This benchmark does not use any external libraries. No special JavaScript features are mentioned in the provided code snippets. **Other Alternatives** Some alternative approaches to creating an array copy include: 1. `Array.from()`: This method creates a new array from an array-like object or iterable. ```javascript var other = Array.from(params); ``` 2. Using `map()` and `concat()`: This approach creates a new array by mapping over the original array and concatenating the results. ```javascript var other = params.map((x) => x).concat(); ``` However, these approaches may have performance issues or be less intuitive than the spread operator. **Benchmark Preparation Code** The preparation code sets up an array of 100 elements, each containing the string "Hello World". ```javascript var params = Array(100).fill('Hello World'); ``` This creates a large array that can be efficiently copied using the spread operator.
Related benchmarks
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?