Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
toArray vs Spread
(version: 1)
Comparing performance of:
Array.from vs Spread
Created:
one year ago
by:
Guest
Go to the latest result
Tests:
Array.from
var fooSet = new Set(); for(var i=0;i<100;i++) { fooSet.add(i); } var other = fooSet.toArray();
Spread
var fooSet = new Set(); for(var i=0;i<100;i++) { fooSet.add(i); } var other = [...fooSet];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Array.from
Spread
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; rv:137.0) Gecko/20100101 Firefox/137.0
Browser/OS:
Firefox 137 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=598313" width="100%" height="500px"></iframe>
Spread
540K/s
Array.from
0/s
View exact numbers
Test name
Executions per second
✓
Spread
540,232 Ops/sec
Array.from
0 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark titled "toArray vs Spread" compares two approaches for converting a `Set` object into an array in JavaScript: using the `Array.from()` method and using the spread operator (`[...]`). Here's a detailed analysis of the benchmark and its results: ### Test Cases 1. **Array.from** - **Code**: ```javascript var fooSet = new Set(); for (var i = 0; i < 100; i++) { fooSet.add(i); } var other = fooSet.toArray(); ``` - **Test Name**: "Array.from" - **Purpose**: This test attempts to use `Array.from()` to convert the Set `fooSet` to an array. However, there seems to be an error in the implementation as it references `fooSet.toArray()`, which is not a method of the `Set` object; this should likely be `Array.from(fooSet)`. 2. **Spread** - **Code**: ```javascript var fooSet = new Set(); for (var i = 0; i < 100; i++) { fooSet.add(i); } var other = [...fooSet]; ``` - **Test Name**: "Spread" - **Purpose**: This test uses the spread operator to transform the `Set` `fooSet` into an array. The spread operator allows for a concise syntax to copy elements from iterable objects like sets into a new array. ### Performance Results - **Spread** - **Executions Per Second**: 540,232 - **Browser**: Firefox 137 - **Device Platform**: Desktop - **Operating System**: Mac OS X 10.15 - **Array.from** - **Executions Per Second**: 0.0 (indicating a failure or unexecuted code) - **Browser**, **Device Platform**, **Operating System**: Same as above ### Pros and Cons #### Using `Array.from()` - **Pros**: - Explicitly conveys intent to convert from an iterable to an array. - Provides additional options such as mapping over the items during conversion. - **Cons**: - In this benchmark, the method fails due to incorrect usage as `fooSet.toArray()` instead of `Array.from(fooSet)`, resulting in no successful operations or benchmarks being counted. - Could be less utilized in simpler cases where direct conversion is needed without additional options. #### Using Spread Operator - **Pros**: - Offers a very concise and readable syntax. - Ideal for quick transformations from iterables to arrays. - Generally high performance in modern JavaScript engines, as evidenced by the high execution speed recorded in the benchmark. - **Cons**: - While often more concise and readable, it is less explicit than `Array.from()` in terms of intent. For developers unfamiliar with the spread operator, it may initially be less clear that an array is being created. ### Alternatives 1. **Using `forEach` Method**: ```javascript var array = []; fooSet.forEach(value => array.push(value)); ``` 2. **Using Traditional Loop**: ```javascript var array = []; for (let value of fooSet) { array.push(value); } ``` 3. **Using `Array.prototype.slice.call()`** (not directly applicable as `Set` is not an array-like object but could be adapted). ```javascript var array = Array.prototype.slice.call(fooSet); ``` Each of these alternatives has their own pros and cons regarding readability, performance, and brevity, similar to the approaches already mentioned. The spread operator has gained significant traction due to its simplicity, while `Array.from()` adds clarity for operations needing additional functionality.
Related benchmarks
Array.from vs Spread
Array.from vs Spread really
Array.from vs Spread (small)
Array.from vs Spread using 10000 elements
Comments
Confirm delete:
Do you really want to delete benchmark?