Benchmark: fill array with value: map(callback) vs fill(value)

Script Preparation code:

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}));

Tests:

.map(callback) - 1 000 elements
const result = array1000.map(() => true);
.fill(value) - 1 000 elements
const result = new Array(array1000.length).fill(true);
.map(callback) - 10 000 elements
const result = array10000.map(() => true);
.fill(value) - 10 000 elements
const result = new Array(array10000.length).fill(true);
.map(callback) - 100 000 elements
const result = array100000.map(() => true);
.fill(value) - 100 000 elements
const result = new Array(array100000.length).fill(true);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 hours ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
.map(callback) - 1 000 elements	1029095.4 Ops/sec
.fill(value) - 1 000 elements	754083.9 Ops/sec
.map(callback) - 10 000 elements	90685.7 Ops/sec
.fill(value) - 10 000 elements	73701.4 Ops/sec
.map(callback) - 100 000 elements	2223.9 Ops/sec
.fill(value) - 100 000 elements	3528.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

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:

1. Using the `map()` method with a callback function, which returns a new array with the same length as the original array.
2. Using the `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)`
	+ The main difference between these two approaches is that `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.
* 1,000 elements vs 10,000 elements vs 100,000 elements
	+ This variation tests how performance scales with the size of the input data.

**Pros and Cons**

Here are some pros and cons of each approach:

* `.map(callback)`:
	+ Pros: Returns a new array with the same length as the original array, which can be useful for many applications.
	+ Cons: Requires creating a new array, which can lead to increased memory usage and slower performance for large datasets.
* `.fill(value)`:
	+ Pros: Sets all elements of an existing array to the specified value, which can be faster than `map()` since it doesn't require creating a new array.
	+ Cons: Fills all elements with the same value, so if you need different values for each element, this approach may not be suitable.

**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:

* Using `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.
* Using `reduce()` instead of `map()` or `.fill()`: `array.reduce((acc, current) => acc + current)`, which accumulates values from an array using a callback function.
* Using libraries like Lodash, which provides utility functions for common tasks like mapping and filling arrays.

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.

Related benchmarks:

fill array with value: map(callback) vs fill(value) (version: 4)

Comparing performance of: .map(callback) - 1 000 elements vs .fill(value) - 1 000 elements vs .map(callback) - 10 000 elements vs .fill(value) - 10 000 elements vs .map(callback) - 100 000 elements vs .fill(value) - 100 000 elements

Created: 4 years ago by: Registered User

Jump to the latest 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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):