var array1000 = (new Array(1000)).map((e, i) => ({a: i, b: i, c: i, d: i, e: i, f: i, g: i, test: 'object'+ i}));
var array10000 = (new Array(10000)).map((e, i) => ({a: i, b: i, c: i, d: i, e: i, f: i, g: i, test: 'object'+ i}));
var array100000 = (new Array(100000)).map((e, i) => ({a: i, b: i, c: i, d: i, e: i, f: i, g: i, test: 'object'+ i}));
const result = array1000.map(() => true);
const result = new Array(array1000.length).fill(true);
const result = array10000.map(() => true);
const result = new Array(array10000.length).fill(true);
const result = array100000.map(() => true);
const result = new Array(array100000.length).fill(true);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
.map(callback) - 1 000 elements | |
.fill(value) - 1 000 elements | |
.map(callback) - 10 000 elements | |
.fill(value) - 10 000 elements | |
.map(callback) - 100 000 elements | |
.fill(value) - 100 000 elements |
Test name | Executions per second |
---|---|
.map(callback) - 1 000 elements | 65178.6 Ops/sec |
.fill(value) - 1 000 elements | 1000816.0 Ops/sec |
.map(callback) - 10 000 elements | 6634.7 Ops/sec |
.fill(value) - 10 000 elements | 158758.8 Ops/sec |
.map(callback) - 100 000 elements | 662.2 Ops/sec |
.fill(value) - 100 000 elements | 15451.2 Ops/sec |
Let's break down the provided benchmark definition and test cases to understand what is being tested.
Benchmark Definition
The benchmark measures the performance of two different approaches to fill an array with values:
map()
method with a callback function, which returns a new array with the same length as the original array.fill()
method, which sets all elements of an existing array to the specified value.Options Compared
The benchmark compares the performance of two options for each test case:
.map(callback)
vs .fill(value)
map()
returns a new array with the same length as the original array, while fill()
sets all elements of an existing array to the specified value.Pros and Cons
Here are some pros and cons of each approach:
.map(callback)
:.fill(value)
:map()
since it doesn't require creating a new array.Library and Purpose
The map()
method is a built-in JavaScript function that returns a new array with the same length as the original array, where each element in the new array is the result of applying a provided callback function to the corresponding element in the original array. This approach allows for more flexibility and control over the transformation process.
Special JS Feature or Syntax
There are no special JavaScript features or syntax used in this benchmark that require explanation.
Other Alternatives
Other alternatives to .map()
and .fill()
include:
forEach()
instead of map()
: array.forEach(callback)
, which executes a callback function once for each element in the array, but doesn't return a new array.reduce()
instead of map()
or .fill()
: array.reduce((acc, current) => acc + current)
, which accumulates values from an array using a callback function.In summary, this benchmark measures the performance of two different approaches to fill an array with values: using map()
with a callback function versus using fill()
. The results can help developers understand which approach is faster and more suitable for their specific use cases.