const result = Array.from({length:10000}, (_,i)=>i)
const result = Array(10000).fill().map((a, i) => i);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
.map(callback) - 1 000 elements | |
.fill(value) - 1 000 elements |
Test name | Executions per second |
---|---|
.map(callback) - 1 000 elements | 3654.4 Ops/sec |
.fill(value) - 1 000 elements | 34224.3 Ops/sec |
Let's break down the provided benchmark and explain what is being tested, compared, and the pros and cons of each approach.
Benchmark Definition
The benchmark definition represents a JavaScript microbenchmark that tests two different ways to fill an array with values: using the .map()
method (callback) and using the .fill()
method.
The benchmark is defined as:
{
"Name": "fill array with value: map(callback) vs fill(value) 2",
"Description": null,
"Script Preparation Code": null,
"Html Preparation Code": null
}
This definition indicates that we are comparing two specific methods for filling an array, but the actual script preparation code and HTML preparation code are empty, suggesting that these are not part of the benchmark.
Individual Test Cases
The benchmark has two individual test cases:
[
{
"Benchmark Definition": "const result = Array.from({length:10000}, (_,i)=>i)",
"Test Name": ".map(callback) - 1 000 elements"
},
{
"Benchmark Definition": "const result = Array(10000).fill().map((a, i) => i);",
"Test Name": ".fill(value) - 1 000 elements "
}
]
These test cases are comparing the performance of two different approaches to fill an array with values:
.map(callback)
method.fill()
methodThe first test case uses Array.from()
, which is a modern JavaScript method for creating an array from an iterable, and it provides a callback function to transform each element.
The second test case uses the older Array()
constructor to create an empty array, followed by the .fill()
method to fill the array with values.
Library Used
There is no specific library mentioned in the benchmark definition or test cases. However, note that Array.from()
is a built-in JavaScript method introduced in ECMAScript 2015 (ES6).
Special JS Feature/Syntax
None of the provided test cases use any special JavaScript features or syntax.
Comparison and Pros/Cons
The comparison between .map(callback)
and .fill(value)
methods can be summarized as follows:
.map(callback)
: This method is generally slower than .fill()
because it iterates over each element in the array, applying the callback function to transform each value. This approach provides more flexibility but comes at a performance cost..fill(value)
: This method is generally faster than .map(callback)
because it simply assigns the provided value to each element in the array. This approach provides a simple, straightforward way to fill an array with values..map(callback)
.Other Alternatives
If you need to perform complex transformations on large datasets, other alternatives to .map(callback)
include:
Array.prototype.forEach()
methodfor...of
loops or generatorsKeep in mind that these alternatives may have varying performance characteristics compared to .map(callback)
.