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

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 runs

.fill(value) - 1 000 elements

714K/s

.map(callback) - 1 000 elements

704K/s

.fill(value) - 10 000 elements

75K/s

.map(callback) - 10 000 elements

63K/s

.fill(value) - 100 000 elements

4K/s

.map(callback) - 100 000 elements

3K/s

Fastest: .fill(value) - 1 000 elements (246.8x faster)

View exact numbers

✓ .fill(value) - 1 000 elements : 713,625 ops/sec
• .map(callback) - 1 000 elements: 704,498 ops/sec
• .fill(value) - 10 000 elements : 74,867 ops/sec
• .map(callback) - 10 000 elements: 63,261 ops/sec
• .fill(value) - 100 000 elements : 3,719 ops/sec
• .map(callback) - 100 000 elements: 2,891 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year ago)

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

.map(callback) - 1 000 elements

797K/s

.fill(value) - 1 000 elements

592K/s

.map(callback) - 10 000 elements

64K/s

.fill(value) - 10 000 elements

56K/s

.fill(value) - 100 000 elements

3K/s

.map(callback) - 100 000 elements

3K/s

View exact numbers

Test name	Executions per second
✓ .map(callback) - 1 000 elements	796,778 Ops/sec
.fill(value) - 1 000 elements	591,696 Ops/sec
.map(callback) - 10 000 elements	63,755 Ops/sec
.fill(value) - 10 000 elements	56,463 Ops/sec
.fill(value) - 100 000 elements	3,354 Ops/sec
.map(callback) - 100 000 elements	2,865 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

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: 5 years ago by: Registered User

Go 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

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

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

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: 5 years ago by: Registered User

Go 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

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

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`