Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from vs Spread list
(version: 1)
Comparing performance of:
Array.from vs Spread
Created:
10 months ago
by:
Guest
Go to the latest result
Tests:
Array.from
var fooSet = []; for(var i=0;i<100;i++) { fooSet.push(i); } var other = Array.from(fooSet);
Spread
var fooSet = []; for(var i=0;i<100;i++) { fooSet.push(i); } var other = fooSet.splice();
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:
10 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Browser/OS:
Chrome 140 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=618029" width="100%" height="500px"></iframe>
Spread
6.3M/s
Array.from
5.9M/s
View exact numbers
Test name
Executions per second
✓
Spread
6,336,878 Ops/sec
Array.from
5,948,208 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated 10 months ago):
The benchmark described tests the performance of two different methods for creating an array from an iterable (in this case, an array-like object) in JavaScript: `Array.from` and the spread operator (`...`), implemented via the `splice` method in this context. ### Test Options Overview 1. **Array.from** - **Syntax**: `var other = Array.from(fooSet);` - **Description**: `Array.from` is a built-in JavaScript method available since ECMAScript 2015 (ES6). It converts various types of iterable or array-like objects (like NodeList, arguments object) into an array. - **Pros**: - It can take a second optional argument, a mapping function, which can transform elements as they are added to the array. - It is clear and expressive, indicating that an array is being created from an iterable. - **Cons**: - It could be slightly slower than some alternatives, depending on the implementation. 2. **Spread Operator (`...`) via Splice** - **Syntax**: `var other = fooSet.splice();` - **Description**: The example here is not directly using the spread operator; instead, it demonstrates a different method of copying an array. `splice` is typically used to remove elements from an array but without parameters, it can return the elements of the array itself. - **Pros**: - If done correctly (like using `...fooSet`), it’s a succinct way to create a shallow copy of an array, which can lead to clearer code. - **Cons**: - When using `splice()` without parameters, it transforms the original array by emptying it, which might not be the desired behavior and can lead to bugs. - The analogy of utilizing `splice()` here can be confusing, as it is not the intended use case of the method (compared to how `Array.from` is utilized). - It does not provide the mapping ability that `Array.from` offers. ### Benchmark Considerations Looking at the provided latest benchmark results, we see the performance comparisons of the two methods on a specific platform (Chrome 140 on Mac OS X 10.15.7): - **Spread** method: **6,336,877.5** executions per second. - **Array.from** method: **5,948,208.5** executions per second. ### Performance Insights - The `Spread` copy method (`splice()`, albeit misapplied here) outperformed `Array.from` in this benchmark. - It's essential to note that results may vary based on the JavaScript engine's optimization, the size of data being processed, and hardware differences. ### Alternatives Other alternatives for creating arrays from iterable sources in JavaScript that weren't directly tested in this benchmark include: - **Using `for...of` loop**: You could manually populate a new array with a loop. ```javascript let other = []; for (let value of fooSet) { other.push(value); } ``` - **Using `map` with `Array.from`**: If you want to transform elements while copying. ```javascript var other = Array.from(fooSet, x => x * 2); ``` - **Using `concat`**: If `fooSet` is an array, you can also replicate its content via `concat`. ```javascript var other = [].concat(fooSet); ``` ### Conclusion When choosing between these methods, considerations should include clarity, performance needs, and the specific requirements of your use case (e.g., whether you need to transform or simply copy the values). While benchmarks provide useful data, the right choice may often depend on the context of the code and the expected performance in a real-world scenario.
Related benchmarks
Array.from vs Spread
Array.from vs Spread really
Array.from vs Spread using 10000 elements
Array.from vs Spread123
Comments
Confirm delete:
Do you really want to delete benchmark?