Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from vs. Array/fill/map
(version: 0)
Comparing performance of:
Array.from vs Array, fill, map
Created:
7 years ago
by:
Guest
Go to the latest result
Script Preparation code:
LENGTH = 10000; count = 0;
Tests:
Array.from
Array.from({length: LENGTH}, () => count++)
Array, fill, map
Array(LENGTH).fill().map(() => count++)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Array.from
Array, fill, map
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/135.0.0.0 Safari/537.36
Browser/OS:
Chrome 135 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=599879" width="100%" height="500px"></iframe>
Array, fill, map
1K/s
Array.from
858/s
View exact numbers
Test name
Executions per second
✓
Array, fill, map
1,148 Ops/sec
Array.from
858 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided benchmark. **What is being tested?** The benchmark measures the performance difference between two approaches to create and populate an array: `Array.from()` and a manual implementation using `Array`, `fill()`, and `map()` methods. **Options compared:** Two options are compared: 1. **`Array.from({length: LENGTH}, () => count++)`**: This approach uses the `Array.from()` method to create an array with `LENGTH` elements, where each element is generated by a callback function that increments a counter variable `count`. 2. **`Array(LENGTH).fill().map(() => count++)`**: This approach creates an array of length `LENGTH`, fills it with a single value using `fill()`, and then maps over the array to generate the same elements as in the first approach. **Pros and cons:** * **`Array.from()` method:** * Pros: * Shorter and more concise code. * Often preferred for its readability and expressiveness. * Can be faster due to the optimized implementation by modern JavaScript engines (e.g., V8 in Chrome, SpiderMonkey in Firefox). * Cons: * Might not be as familiar or intuitive for developers without experience with this method. * The performance difference between `Array.from()` and other methods can be small, especially for smaller arrays. * **Manual implementation using `Array`, `fill()`, and `map()` methods:** * Pros: * Provides more control over the array creation process. * Can be useful when working with specific requirements or constraints (e.g., older JavaScript engines). * Demonstrates a deep understanding of the underlying array operations. * Cons: * Code can be longer and less readable due to the explicit loop structure. * The performance difference between this approach and `Array.from()` might be noticeable for large arrays. **Library used:** There is no specific library used in these benchmarks. However, it's essential to note that both approaches are built into the JavaScript standard library, which means they are optimized for performance by the browser engines (e.g., V8 in Chrome, SpiderMonkey in Firefox). **Special JS feature or syntax:** The only special aspect of this benchmark is the use of the `let` keyword with a block scope variable (`count`). This was introduced in ECMAScript 2015 (ES6) and allows for the declaration of variables without the `var` keyword, which can lead to better code readability and fewer issues due to scoping.
Related benchmarks
Array.from() vs new Array() performance...
Array.from() vs new Array().map()
Array(length).fill() vs Array.from({ length: length })
Comments
Confirm delete:
Do you really want to delete benchmark?