Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from vs Spread v2
(version: 1)
Comparing performance of:
Array.from vs Spread
Created:
one year ago
by:
Guest
Jump to the latest result
Script Preparation code:
var fooSet = new Set(); for (var i = 0; i < 1000; i++) { fooSet.add(i); }
Tests:
Array.from
var other = Array.from(fooSet);
Spread
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:
7 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0
Browser/OS:
Firefox 143 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Array.from
58350.4 Ops/sec
Spread
60689.7 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The provided benchmark tests two different approaches for converting a `Set` to an `Array` in JavaScript: using the `Array.from` method and the spread operator (`...`). Let's break down the core aspects of this benchmark, including the options being compared, their pros and cons, and additional considerations. ### Options Compared 1. **Array.from** - **Benchmark Definition**: `var other = Array.from(fooSet);` - **Test Name**: "Array.from" 2. **Spread Operator** - **Benchmark Definition**: `var other = [...fooSet];` - **Test Name**: "Spread" ### Pros and Cons #### Array.from - **Pros**: - **Clarity**: It makes clear that you are converting an iterable (like a `Set`) to an array. - **Additional Options**: `Array.from` can accept a mapping function as a second argument, which can be useful for transforming the elements during the conversion. - **Cons**: - **Performance**: As seen in the benchmark results, it tends to be slightly slower than the spread operator in this particular test case (1151020.875 executions per second compared to 1210139.25 for Spread). #### Spread Operator - **Pros**: - **Conciseness**: The syntax is shorter and simpler, which can make the code easier to read and write. - **Performance**: In this benchmark, it demonstrated better execution speed when converting the `Set` to an `Array`. - **Cons**: - **Limited Functionality**: Unlike `Array.from`, it does not support a mapping function, meaning that direct transformations during conversion aren't possible. ### Other Considerations - **Choosing Between Options**: The choice between `Array.from` and the spread operator can depend on both performance and the specific requirements of the task. For simple conversions, the spread operator might be sufficient and more performant, while for larger transformations or more complex conversions, `Array.from` may be the better choice. - **Browser Compatibility**: Both methods are widely supported in modern browsers, but `Array.from` was introduced in ES6 (ECMAScript 2015), so for very old browsers, polyfills may be necessary. - **Readability and Maintainability**: In teams and projects, code readability is often as important as performance. Some developers may prefer `Array.from` for its explicitness, particularly if someone else will later maintain the code. ### Alternatives Other methods for converting a `Set` to an `Array` include: - **Using a `for` Loop**: ```javascript let arr = []; for (let item of fooSet) { arr.push(item); } ``` - This is a straightforward approach but more verbose and likely less performant than modern methods. - **Using `map` with an Array**: First converting the `Set` to an array using `Array.from`, then using `.map()` if transformations are needed: ```javascript let transformedArray = Array.from(fooSet, item => item * 2); ``` - **Using `reduce`**: You can convert a `Set` into an array using the `reduce` function: ```javascript let arr = [...fooSet].reduce((acc, item) => { acc.push(item); return acc; }, []); ``` Ultimately, selecting between these options should involve considering performance, readability, and the specific needs of the task at hand. The benchmark provides valuable insights into performance but should be complemented with qualitative factors when making a decision.
Related benchmarks:
Array.from vs Spread #2
Array.from vs Spreadv2
JS Array.from vs Spread [...]
Little array Spread vs Array from
Small array Spread vs Array From
Array.from vs Spread, properly prepared
Array.from vs. Spread
Array.from vs Spread (1000 numbers)
Array.from vs Spread isolated
Array.from vs Spread (only)
Comments
Confirm delete:
Do you really want to delete benchmark?