Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
JavaScript spread operator vs Slice/Splice performance 2
(version: 0)
Comparing performance of:
Array clone with spread operator vs Array clone with slice
Created:
4 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
const ITERATIONS = 500000; var index = ITERATIONS/2; var n = Math.random(); var list = []; for (let i = 0; i < length; i += 1) { list.push(Math.random()); }
Tests:
Array clone with spread operator
const clone = [...list];
Array clone with slice
const clone = list.slice();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Array clone with spread operator
Array clone with slice
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
3 months ago
)
User agent:
Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Browser/OS:
Chrome 144 on Chrome OS 14541.0.0
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Array clone with spread operator
57647884.0 Ops/sec
Array clone with slice
77199280.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in the provided JSON benchmark. **Benchmark Goal** The primary goal of this benchmark is to compare the performance of two approaches for creating an array copy: using the spread operator (`...`) and using the `slice()` method. **Options Compared** Two options are compared: 1. **Array Clone with Spread Operator**: This approach uses the spread operator (`...`) to create a new array copy from the original `list` array. 2. **Array Clone with Slice**: This approach uses the `slice()` method to create a new array copy from the original `list` array. **Pros and Cons of Each Approach** * **Spread Operator (Array Clone)**: + Pros: Simple, concise syntax; efficient creation of shallow copies. + Cons: Can be slower for large arrays due to the overhead of creating a new array object, and it only creates a shallow copy (i.e., it does not recursively clone nested objects). * **Slice Method**: + Pros: Efficient creation of shallow copies; can create deep copies by specifying an offset and length. + Cons: Requires calling `slice()` explicitly, which may add overhead. **Library Used** In the benchmark code, the `Math.random()` function is used to generate random values for the array elements. This suggests that no external libraries are required beyond the standard JavaScript library. **Special JS Feature/Syntax** None of the approaches in this benchmark rely on special JavaScript features or syntax, such as async/await, generators, or advanced functional programming constructs. **Other Considerations** * The benchmark uses a fixed-length array `list` with random elements, which ensures that the performance differences between the two approaches are not influenced by the size or structure of the input data. * The number of iterations (`ITERATIONS`) is set to 500,000, which provides a good balance between statistical significance and computational cost. **Alternative Approaches** Other alternatives for creating array copies in JavaScript include: 1. **Array.prototype.map()**: Creates a new array by applying a transformation function to each element of the original array. 2. **Array.prototype.slice.call()**: Similar to `slice()`, but returns an array instead of modifying the original array. 3. **Array.prototype.reduce()**: Can be used to create a new array by accumulating elements in a callback function. However, these alternatives may have different performance characteristics and use cases compared to the spread operator and slice method used in this benchmark.
Related benchmarks:
JavaScript spread operator vs Slice/Splice performance - 2
JavaScript spread operator vs Slice/Splice performance testing
JavaScript spread operator vs Slice/Splice performance, passing
JavaScript spread operator vs Slice/Splice performance 2edas
Comments
Confirm delete:
Do you really want to delete benchmark?