Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from vs Array().keys
(version: 0)
Comparing performance of:
Array.from vs Array().keys
Created:
one year ago
by:
Guest
Go to the latest result
Script Preparation code:
var n = 1000;
Tests:
Array.from
Array.from(Array(n), (_, i) => i + 1);
Array().keys
[...Array(n).keys()].map(e => e + 1);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Array.from
Array().keys
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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
Browser/OS:
Chrome 130 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=552755" width="100%" height="500px"></iframe>
Array.from
37K/s
Array().keys
36K/s
View exact numbers
Test name
Executions per second
✓
Array.from
37,147 Ops/sec
Array().keys
35,548 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Measuring the performance of JavaScript array methods is an essential task for any web developer or performance engineer. Let's break down what's being tested in this benchmark: **Benchmark Definition** The `Name` field indicates that the benchmark compares two different ways to create an array: `Array.from()` and using the `Array().keys()` method. The `Script Preparation Code` provides a variable `n` set to 1000, which is used as the size of the array being created. **Comparison Options** There are two comparison options: 1. **`Array.from()`**: This method creates a new array by mapping over an existing array or iterable. It's often preferred because it's more readable and allows for more control over the resulting array. 2. **`Array().keys()`**: This method returns an array of keys from an object (in this case, a simple numerical sequence). It's used here to create an array by mapping over the `Array().keys()` result. **Pros and Cons** * **`Array.from()`**: * Pros: More readable, allows for more control over the resulting array, efficient. * Cons: May be slower than a single array operation if optimized internally (e.g., using a single allocation). * **`Array().keys()`**: * Pros: Simple and straightforward, can potentially be faster due to internal optimizations in some browsers. * Cons: Less readable and less flexible compared to `Array.from()`. **Library** None are explicitly mentioned in the provided code. However, it's worth noting that neither method requires any external libraries beyond JavaScript core functionality. **Special JS Feature/Syntax** There is a notable feature being tested here: template literals (`_ => i + 1`). In modern JavaScript, you can use template literals to create an array by using the spread operator (`...`) on an array of functions. This approach isn't mentioned in the benchmark code but is often used when working with array operations. **Other Alternatives** If you want to compare these methods with other approaches: * **`Array.prototype.map()`**: While similar to `Array.from()`, this method uses a different internal implementation that may be optimized for performance. * **`Array.from()` with a custom mapping function**: Using a separate function within the spread operator (`(...(f) => f())`) allows you to define your own mapping logic. However, this might not always offer better performance than using `Array.from()` directly. To explore these alternatives and see how different browsers perform on various methods, consider adding more benchmark cases or using online resources like BenchmarkJS. I hope that helps explain the benchmark and its comparisons!
Related benchmarks
Array.from({ length: n }) vs new Array(n)
array[0] vs array.at(0) on 100000 elements
Array.splice(0, N) vs Array.length === N
Array.from() vs new Array() with index
Comments
Confirm delete:
Do you really want to delete benchmark?