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

fill array with value: map(callback) vs fill(value) vs fill(dummy).map(callback) (version: 0) 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 vs .fill(dummy).map(callback) - 100 000 elements`

Created: 2 years ago by: Guest

Go to the latest result

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);
.fill(dummy).map(callback) - 100 000 elements
const result = new Array(array100000.length).fill(0).map(() => 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
.fill(dummy).map(callback) - 100 000 elements

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

.fill(value) - 1 000 elements

862K/s

.map(callback) - 1 000 elements

377K/s

.fill(value) - 10 000 elements

99K/s

.map(callback) - 10 000 elements

42K/s

.fill(value) - 100 000 elements

9K/s

.map(callback) - 100 000 elements

4K/s

.fill(dummy).map(callback) - 100 000 elements

1K/s

View exact numbers

Test name	Executions per second
✓ .fill(value) - 1 000 elements	861,659 Ops/sec
.map(callback) - 1 000 elements	376,575 Ops/sec
.fill(value) - 10 000 elements	99,304 Ops/sec
.map(callback) - 10 000 elements	41,538 Ops/sec
.fill(value) - 100 000 elements	9,120 Ops/sec
.map(callback) - 100 000 elements	3,605 Ops/sec
.fill(dummy).map(callback) - 100 000 elements	1,379 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition**

The benchmark measures the performance difference between three approaches to create an array with a specific number of elements:

1. `map(callback)` with a dummy value (an empty object).
2. `fill(value)` with a non-zero value.
3. `fill(dummy).map(callback)`, which creates an empty array and then fills it with the dummy value before mapping.

**Options Compared**

The benchmark compares the performance of these three approaches:

* `map(callback)` with a dummy value (an empty object).
* `fill(value)` with a non-zero value.
* A hybrid approach that combines `fill(dummy)` with `map(callback)`.

**Pros and Cons of Each Approach:**

1. **`map(callback)` with a dummy value**:
	* Pros: Easy to implement, as it leverages the built-in `map()` function.
	* Cons: May lead to slower performance due to the overhead of creating an empty object for each iteration.
2. **`fill(value)` with a non-zero value**:
	* Pros: Can be faster than `map(callback)` since it only requires filling an array with a single value, which is typically more efficient.
	* Cons: May not work well if you need to access the filled values later in your code.
3. **`fill(dummy).map(callback)`**:
	* Pros: Combines the benefits of both approaches by creating an empty array and then filling it before mapping.
	* Cons: Requires an extra step, which may add overhead.

**Library Usage**

The benchmark uses the `Array.prototype.map()` function, which is a built-in JavaScript method. No external libraries are required.

**Special JS Features/Syntax**

None mentioned in this specific benchmark. However, if you're interested in exploring other special features or syntax in JavaScript, you can consider:

* ES6+ features like arrow functions (`=>`), destructuring, and template literals.
* Advanced topics like closures, prototypes, and the `this` context.

**Other Alternatives**

If you're looking for alternative approaches to create an array with a specific number of elements, consider:

* Using `Array.from()` or `Array.create()` (more on this in a separate explanation).
* Leveraging browser-specific APIs, such as WebAssembly or WebGL.

Keep in mind that the best approach will depend on your specific use case and performance requirements.