Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Array.from vs for...of vs [...]
(version: 0)
Benchmark.js
Comparing performance of:
Array.from vs for vs spread
Created:
5 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var array = new Array(10000); array[0]='a'; array[array.length-1]='z';
Tests:
Array.from
var from = Array.from(array);
for
var arrayFor = []; for (const e of array) { arrayFor.push(e); }
spread
var arraySpread =[...array]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.from
for
spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0
Browser/OS:
Firefox 132 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=568056" width="100%" height="500px"></iframe>
for
3K/s
Array.from
3K/s
spread
3K/s
View exact numbers
Test name
Executions per second
✓
for
3,223 Ops/sec
Array.from
3,158 Ops/sec
spread
3,065 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark JSON and explain what is being tested, along with the pros and cons of different approaches. **Benchmark Description** The benchmark measures the performance of three ways to create an array from a given array: 1. `Array.from()` 2. `for...of` loop 3. Array spread syntax (`[...]`) **Script Preparation Code** The script preparation code creates a large array with 10,000 elements and sets two specific elements (`array[0] = 'a'` and `array[array.length-1] = 'z'`). This is done to ensure that all three methods being tested create an array with the same structure. **Html Preparation Code** There is no HTML preparation code provided, which means that the benchmark only measures the performance of the JavaScript code itself. **Individual Test Cases** Each test case defines a specific benchmark definition using one of the three methods. The test cases are: 1. `Array.from`: Creates an array from the prepared array. 2. `for`: Uses a `for...of` loop to create a new array by pushing elements from the original array. 3. `spread`: Uses the Array spread syntax (`[...]`) to create a new array from the original array. **Library Used** None of the test cases use any external libraries, which means that the benchmark is only measuring the performance of the built-in JavaScript methods. **Special JS Features or Syntax** The benchmark uses the `for...of` loop, which is a modern JavaScript feature introduced in ECMAScript 2015. The Array spread syntax (`[...]`) is also a relatively new feature introduced in ECMAScript 2018. **Pros and Cons of Different Approaches** Here are some pros and cons of each approach: * `Array.from()`: + Pros: Efficient and concise way to create an array. + Cons: Can be slower than other methods for small arrays. * `for...of` loop: + Pros: Easy to understand and implement, can be faster than `Array.from()` for large arrays. + Cons: Requires more memory allocations and iterations compared to `Array.from()`. * Array spread syntax (`[...]`): + Pros: Similar efficiency to `Array.from()`, easy to read and write. + Cons: May require additional memory allocations, can be slower than other methods for very large arrays. **Other Alternatives** Some alternative approaches could include: * Using the `map()` method instead of `for...of`: `array.map(e => e)` * Using a traditional `for` loop with indexing: `var arrayNew = []; var i = 0; while (i < array.length) { arrayNew.push(array[i++]); }` * Using other libraries or frameworks, such as Lodash or Ramda, which may provide optimized implementations of these methods. Keep in mind that the performance differences between these approaches can be small and may depend on the specific use case and environment.
Related benchmarks
array[array.length - 1] vs array.at(-1)
array[1] vs array.at(1)
array[index] vs array.at(index)
Comments
Confirm delete:
Do you really want to delete benchmark?