Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from vs Spread 100,000
(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<100000;i++) { fooSet.add(i); } var other = Array.from(fooSet);
Spread
var fooSet = new Set(); for(var i=0;i<100000;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 (X11; Ubuntu; Linux x86_64; rv:134.0) Gecko/20100101 Firefox/134.0
Browser/OS:
Firefox 134 on Ubuntu
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=582824" width="100%" height="500px"></iframe>
Array.from
228/s
Spread
216/s
View exact numbers
Test name
Executions per second
✓
Array.from
228 Ops/sec
Spread
216 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark in question compares two methods of converting a `Set` to an `Array` in JavaScript: using `Array.from()` and the spread syntax (`[...]`). Let's dive into the details. ### Options Compared 1. **Array.from()** - **Test Case**: ```javascript var fooSet = new Set(); for(var i=0;i<100000;i++) { fooSet.add(i); } var other = Array.from(fooSet); ``` - **Executions Per Second**: 354.32 2. **Spread Syntax (`[...]`)** - **Test Case**: ```javascript var fooSet = new Set(); for(var i=0;i<100000;i++) { fooSet.add(i); } var other = [...fooSet]; ``` - **Executions Per Second**: 352.64 ### Pros and Cons of Each Approach **1. Array.from()** - **Pros**: - Clearly expresses its intent: Converts a given iterable (like `Set`) into an array. - Can accept a mapping function as a second argument, which adds flexibility. - **Cons**: - Slightly slower in this benchmark, which may be a consideration in performance-critical applications. **2. Spread Syntax (`[...]`)** - **Pros**: - More concise and often regarded as more readable for simple use cases, especially when creating arrays from iterables. - It has a uniform syntax that can be applied to various data structures (like arrays, objects, etc.). - **Cons**: - Limited in flexibility as it doesn’t take a mapping function directly. ### Other Considerations - **Performance Context**: The performance difference between the two methods in this benchmark was minimal. Array.from() had an execution speed of approximately 354.32 executions per second, while the spread syntax achieved around 352.64 executions per second. Since both methods have similar performance, the choice between them may come down to readability or specific requirements of the codebase. - **Use Cases**: The choice between these methods might also depend on the specific use case, such as whether a transformation of items during conversion is required (in which case, `Array.from()` offers a more direct approach with its mapping function). ### Alternatives 1. **For Loop**: - A traditional approach using a for loop to manually push elements to the new array: ```javascript var other = []; fooSet.forEach(function(value) { other.push(value); }); ``` 2. **Array.prototype.concat**: - Not commonly used for this specific case, but you could use `Array.prototype.concat` with the spread operator for arrays of sets or similar iterable structures: ```javascript var other = [].concat(...fooSet); ``` Overall, the distinction between `Array.from()` and spread syntax primarily comes down to personal preference, code style guidelines, and specific functional requirements rather than performance, especially for standard use cases with reasonable datasets like the one tested here.
Related benchmarks
Array.from vs Spread really
Array.from vs Spread using 10000 elements
Array.from vs Spread using 1000000 elements
Comments
Confirm delete:
Do you really want to delete benchmark?