Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from vs Spread with square and map
(version: 0)
Comparing performance of:
Array.from vs Spread vs Array.from with map
Created:
7 years 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 = Array.from(fooSet, i => i * i);
Spread
var fooSet = new Set(); for(var i=0;i<100;i++) { fooSet.add(i); } var other = [...fooSet].map(i => i * i);
Array.from with map
var fooSet = new Set(); for(var i=0;i<100;i++) { fooSet.add(i); } var other = Array.from(fooSet).map(i => i * i);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.from
Spread
Array.from with map
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
6 months ago
)
User agent:
Mozilla/5.0 (Android 15; Mobile; rv:147.0) Gecko/147.0 Firefox/147.0
Browser/OS:
Firefox Mobile 147 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=624596" width="100%" height="500px"></iframe>
Array.from
205K/s
Array.from with map
173K/s
Spread
155K/s
View exact numbers
Test name
Executions per second
✓
Array.from
205,100 Ops/sec
Array.from with map
173,233 Ops/sec
Spread
155,174 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **Benchmark Overview** The test measures the performance of three different approaches to convert a Set object to an array: 1. `Array.from(fooSet, i => i * i)` 2. `[...fooSet].map(i => i * i)` 3. `Array.from(fooSet).map(i => i * i)` **Approach 1: `Array.from(fooSet, i => i * i)`** This approach uses the spread operator (`...`) to convert the Set object to an array, and then applies a mapping function to each element. Pros: * Clear and concise syntax * Easy to read and understand Cons: * May involve additional overhead due to the spread operation * The mapping function may introduce additional complexity if not optimized correctly **Approach 2: `[...fooSet].map(i => i * i)`** This approach uses the spread operator (`...`) to convert the Set object to an array, and then applies a mapping function to each element. Pros: * Similar benefits as Approach 1 in terms of syntax clarity * Can be more efficient than Approach 3 due to the use of `map` instead of `forEach` Cons: * May still involve additional overhead due to the spread operation **Approach 3: `Array.from(fooSet).map(i => i * i)`** This approach uses `Array.from()` to convert the Set object to an array, and then applies a mapping function to each element. Pros: * Can be more efficient than Approaches 1 and 2 due to the use of `forEach` * Simplifies the code by using a single method call Cons: * May involve additional overhead due to the creation of a new array * The mapping function may introduce additional complexity if not optimized correctly **Library Used: Set** The `Set` object is a built-in JavaScript data structure that stores unique values. In this benchmark, a Set object is created and populated with 100 elements, and then converted to an array using the three different approaches. **Special JS Feature/Syntax: Spread Operator (`...`)** The spread operator (`...`) is a relatively new feature in JavaScript that allows for spreading elements of an iterable (such as an array or Set) into a new array. This feature was introduced in ECMAScript 2015 (ES6). In the context of this benchmark, the spread operator is used to convert the Set object to an array. **Other Alternatives** If you need to convert a Set object to an array, there are other alternatives that may be more efficient or convenient: * Using `Array.from()` without a mapping function: `Array.from(fooSet)` * Using `convertToArray()` from the `lodash` library: `_`.convertToArray(fooSet)` * Using a custom implementation using `forEach()`: `fooSet.forEach((value, index) => { array[index] = value; })` However, these alternatives may not be as concise or readable as the approaches tested in this benchmark.
Related benchmarks
Javascript string to array mapping: Array.from() vs Spread syntax [...spread]
Array.from() vs spread []
Comments
Confirm delete:
Do you really want to delete benchmark?