Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array Spread vs Fill vs New Array
(version: 0)
Comparing performance of:
New Array vs Fill vs Map
Created:
one year ago
by:
Guest
Go to the latest result
Tests:
New Array
[...new Array(5)].map(Object);
Fill
new Array(5).fill(null).map(Object);
Map
[...Array(5)].map(Object);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
New 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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Browser/OS:
Chrome 138 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=614565" width="100%" height="500px"></iframe>
New Array
12.3M/s
Map
9.7M/s
Fill
8.0M/s
View exact numbers
Test name
Executions per second
✓
New Array
12,266,862 Ops/sec
Map
9,680,335 Ops/sec
Fill
7,957,847 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of MeasureThat.net and explore what's being tested in this specific benchmark. **Benchmark Overview** The benchmark is designed to compare three approaches for creating an array in JavaScript: 1. Using the spread operator (`[...new Array(5)].map(Object);`) 2. Using the `fill()` method (`new Array(5).fill(null).map(Object);`) 3. Creating a new array using the traditional syntax (`new Array(5).map(Object);`) **Options Compared** The three options being compared are: * **New Array**: Creates a new array using the `new Array()` constructor and then maps over it. * **Fill**: Fills an existing array with null values and then maps over it. * **Spread Operator**: Uses the spread operator (`[...new Array(5)]`) to create a new array, which is then mapped over. **Pros and Cons of Each Approach** Here's a brief summary of the pros and cons of each approach: 1. **New Array**: * Pros: More explicit, easier to understand for beginners. * Cons: Can be slower due to the overhead of creating an intermediate array. 2. **Fill**: * Pros: Faster than `new Array`, as it reuses an existing array. * Cons: May lead to unexpected behavior if not used carefully (e.g., filling a large array with null values). 3. **Spread Operator**: * Pros: Concise, modern syntax that's widely adopted in JavaScript. * Cons: Can be slower than `new Array` due to the overhead of creating an intermediate array. **Library and Special JS Features** There is no library used in this benchmark. Additionally, there are no special JavaScript features being tested (e.g., async/await, Promises). **Other Considerations** When comparing these approaches, it's essential to consider the following: * **Memory allocation**: Creating a new array can lead to additional memory allocation, which may impact performance. * **Overhead of intermediate arrays**: The spread operator creates an intermediate array, which can add overhead compared to the traditional `new Array()` approach. * **Cache locality**: Filling an existing array with null values may improve cache locality, making subsequent operations faster. **Alternatives** If you're looking for alternatives or variations on this benchmark, consider the following: * Test using a larger array size (e.g., 10, 20, 50) to observe scaling effects. * Compare the performance of these approaches with other methods, such as using `Array.from()` or `Array.prototype.slice()`. * Investigate the impact of using different data types (e.g., numbers, strings, objects) on the benchmark results. By exploring these alternatives and considerations, you can gain a deeper understanding of the trade-offs involved in each approach and make informed decisions about which method to use in your own code.
Related benchmarks
Array.from() vs spread []
Comments
Confirm delete:
Do you really want to delete benchmark?