Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from() vs new Array() 3
(version: 1)
Testing the difference between creating filled arrays.
Comparing performance of:
new Array() vs Array.from()
Created:
one year ago
by:
Guest
Go to the latest result
Script Preparation code:
let length = { length: 500 }, func = () => 0
Tests:
new Array()
new Array(500).fill(0, 0, 500)
Array.from()
Array.from(length, func)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
new Array()
Array.from()
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36
Browser/OS:
Chrome Mobile 131 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=570077" width="100%" height="500px"></iframe>
new Array()
180K/s
Array.from()
21K/s
View exact numbers
Test name
Executions per second
✓
new Array()
180,157 Ops/sec
Array.from()
20,989 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark defined in the JSON tests the performance of two different methods for creating and filling an array in JavaScript: `new Array()` with the `.fill()` method and `Array.from()`. ### Options Compared 1. **`new Array(500).fill(0, 0, 500)`** - This method creates a new array with a specified length of 500 and fills it with zeros. The `fill` method is called directly on the newly created array. 2. **`Array.from(length, func)`** - This method uses `Array.from()`, which creates a new array from the specified `length` object (which has a property `length: 500`) and a mapping function (`func`) that returns zero. The mapping function is executed for each index of the new array. ### Pros and Cons #### `new Array().fill()` - **Pros:** - Simplicity: Straightforward and easy to read. - Slightly better performance in certain cases, as seen in the benchmark results, with a higher execution count. - **Cons:** - It creates an array initialized to `undefined` before it's filled. The initialization step can be an overhead if initializing an array with non-trivial values. - The `fill()` method modifies the original array which can potentially lead to unintended consequences if you forget to return it. #### `Array.from()` - **Pros:** - Flexibility: Can easily use a mapping function to create more complex or varied data. This method allows for more advanced initializations beyond filling with the same value. - Processing each element with a callback can be useful for complex array creations. - **Cons:** - Historically slower performance as shown in the benchmark results (20989.4 executions per second vs. 180157.4 for `new Array()`). - Some overhead associated with invoking the mapping function for each element. ### Other Considerations - **Browser Compatibility:** Both methods are widely supported across modern browsers, but older environments may not support `Array.from()`. - **Immediate vs Deferred Initialization:** `new Array().fill()` initializes and fills the array in one step, while `Array.from()` gives some flexibility on how to fill the array but introduces a performance hit in cases where filling is trivial. ### Alternative Approaches 1. **Using a Loop:** - You could initialize the array with a for loop, which can sometimes be faster for simple fills, especially in older JavaScript environments: ```javascript const arr = []; for (let i = 0; i < 500; i++) { arr[i] = 0; } ``` 2. **Spread Syntax:** - Utilizing the spread syntax in combination with `Array()` for small arrays: ```javascript let arr = [...Array(500).keys()].map(() => 0); ``` - This can be more syntactically appealing but less performant than `new Array().fill()`. 3. **Lodash/Other Libraries:** - Libraries like Lodash have utility functions, such as `_.fill()`, which could abstract away some complexity, though they add dependency overhead. In summary, the benchmark is an effective demonstration of the performance trade-offs between two commonly used methods for array creation and initialization in JavaScript. While `new Array().fill()` demonstrates superior performance, `Array.from()` provides a greater degree of flexibility for more complex use cases. The choice between these should depend on the specific needs of the application while also considering performance.
Related benchmarks
Array.from() vs new Array()
my Array.from() vs new Array()
Array.from() vs new Array() - empty
Array.from({ length: n }) vs new Array(n)
Array.from() vs new Array() vs push
Array(length).fill() vs Array.from({ length: length })
Array() vs Array.from() fill
Comments
Confirm delete:
Do you really want to delete benchmark?