Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.from() vs new Array()2
(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
Tests:
new Array()
new Array(500)
Array.from()
Array.from({ length: 500 })
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 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0
Browser/OS:
Firefox 137 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=602388" width="100%" height="500px"></iframe>
new Array()
1616.0M/s
Array.from()
759K/s
View exact numbers
Test name
Executions per second
✓
new Array()
1,616,001,792 Ops/sec
Array.from()
758,924 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
### Benchmark Explanation The benchmark titled "Array.from() vs new Array()2" focuses on comparing the performance of two methods for creating filled arrays in JavaScript. The methods being tested are: 1. **new Array(500)**: This approach creates a new array with a specified length of 500 elements. The array is initialized but the elements themselves are not assigned any values; they are essentially "empty" slots. 2. **Array.from({ length: 500 })**: This method utilizes the static `Array.from()` function to create a new array from an array-like object that has a specified length of 500. By default, the elements in this case are uninitialized (similar to using `new Array(500)`) unless a mapping function is provided to populate them with values. ### Performance Results The benchmark results indicate a marked difference in performance between the two methods: - **new Array(500)**: This method achieved an execution speed of approximately **1,616,001,792** operations per second, showcasing its efficient handling of array creation with a predetermined length. - **Array.from({ length: 500 })**: This method performed significantly slower, with an execution speed of roughly **758,924.5** operations per second. ### Pros and Cons #### `new Array(500)` **Pros:** - **Speed**: As observed, this method is significantly faster for simply initializing an array with a specific length. - **Simplicity**: It is straightforward to use, requiring less code. **Cons:** - **Uninitialized Elements**: The elements in the array are not assigned values, which can lead to unexpected behavior if the code expects actual values in the array. #### `Array.from({ length: 500 })` **Pros:** - **Enhanced Functionality**: Can take a mapping function as a second argument to populate the array with elements, adding flexibility for use cases that require initialized arrays. **Cons:** - **Performance**: Slower performance compared to `new Array()`, making it less suitable for scenarios where performance is a critical factor and simply initializing an empty array is sufficient. - **Overhead**: This method involves more overhead since it parses an object instead of directly creating an array. ### Considerations When deciding between the two options, consider the specific needs for your application: - If you need an empty array of a specific size without immediate values, `new Array(500)` is the preferable choice, especially for performance-intensive tasks. - If there is a requirement to initialize the array with values or if you plan to apply transformations, then `Array.from()` might be more suitable, despite its performance trade-offs. ### Alternatives Other alternatives for creating and populating arrays in JavaScript include: 1. **Array.fill()**: For initializing an array with a specific value. ```javascript let arrayFilled = new Array(500).fill(0); // This creates an array of 500 elements, each initialized to 0. ``` 2. **Spread Operators**: You can create and spread an iterable to create an array. ```javascript const arrayFilled = [...Array(500).keys()]; // Creates an array of numbers from 0 to 499. ``` 3. **Array.from on actual arrays**: You can also use `Array.from()` to create arrays from actual iterable objects like strings or other arrays in addition to the length-based approach. By understanding the performance characteristics and implications of each method, developers can choose the best approach for array creation based on their application's needs.
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().map()
Array() vs Array.from() fill
Array.from() vs new Array() with index
Array.from() vs new Array() vs []
Comments
Confirm delete:
Do you really want to delete benchmark?