Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from() vs new Array().fil() vs [..Array()]
(version: 0)
Testing the difference between creating filled arrays.
Comparing performance of:
new Array().fill() vs Array.from() vs [...Array()]
Created:
3 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var mapfn = (_, index) => { return index * 2 % 10; }
Tests:
new Array().fill()
new Array(500).fill(500).map(mapfn)
Array.from()
Array.from({ length: 500 }, mapfn)
[...Array()]
[...Array(500)].map(mapfn)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
new Array().fill()
Array.from()
[...Array()]
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/131.0.0.0 Safari/537.36 Edg/131.0.0.0
Browser/OS:
Chrome 131 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=580397" width="100%" height="500px"></iframe>
new Array().fill()
265K/s
[...Array()]
243K/s
Array.from()
68K/s
View exact numbers
Test name
Executions per second
✓
new Array().fill()
264,840 Ops/sec
[...Array()]
243,047 Ops/sec
Array.from()
68,000 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided JSON benchmark. **Benchmark Definition** The benchmark tests the performance difference between three ways to create filled arrays in JavaScript: `new Array().fill()`, `Array.from()` with an array constructor, and `[...Array()]` (the spread operator). **Options being compared** 1. **`new Array().fill()`**: This method creates a new array with a specified number of elements, all set to the same value. In this case, it's used to create an array of 500 elements filled with the value `500`. 2. **`Array.from()` with an array constructor**: This method creates a new array from an iterable or an array-like object. Here, it's used to create an array from an array constructor that generates 500 elements. 3. **`[...Array()]` (spread operator)**: This is the spread operator, which converts an array into an array of its elements. **Pros and Cons** 1. `new Array().fill()`: * Pros: Simple and straightforward to use, no need for additional libraries or constructors. * Cons: Can be slower than other methods due to the overhead of creating a new array. 2. `Array.from()` with an array constructor: * Pros: More efficient than `new Array().fill()` as it avoids the overhead of creating a new array. * Cons: Requires using an array constructor, which might be unfamiliar to some developers. 3. `[...Array()]` (spread operator): * Pros: Most lightweight option, no need for additional libraries or constructors. * Cons: Only works in modern JavaScript environments (ECMAScript 2015 and later) due to the use of the spread operator. **Library/Function Used** In this benchmark, the `mapfn` function is used as a callback function. It takes two arguments: `_` (the map iteration argument) and `index`. The function returns an index multiplied by 2, modulo 10 (`index * 2 % 10`). This function is used to calculate some intermediate value that's likely not relevant to the performance test. **Special JS Feature/Syntax** No special JavaScript features or syntax are used in this benchmark. It's a straightforward comparison of three array creation methods. **Other Alternatives** If you wanted to test other array creation methods, here are a few options: 1. `Array.prototype.fill()`: This method creates a new array with a specified number of elements, all set to the same value. 2. `Array.from()` without an array constructor: You can also use `Array.from()` with an iterable or an object as its argument. 3. Other spread operators: Depending on your JavaScript version, you might be able to use other spread operators like `[...new Set()]` or `[...new Map()]`. Keep in mind that the performance differences between these methods are usually minimal, and it's essential to consider the specific requirements of your application when choosing an array creation method.
Related benchmarks
Array.from() vs new Array() vs [..Array()]
Array.from() vs new Array().map()
Array.from() vs new Array() with index
Comments
Confirm delete:
Do you really want to delete benchmark?