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)

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: 10 months ago by: Guest

Jump 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: 10 months 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

Test name	Executions per second
.map(callback) - 1 000 elements	376574.6 Ops/sec
.fill(value) - 1 000 elements	861659.2 Ops/sec
.map(callback) - 10 000 elements	41538.4 Ops/sec
.fill(value) - 10 000 elements	99303.6 Ops/sec
.map(callback) - 100 000 elements	3604.8 Ops/sec
.fill(value) - 100 000 elements	9119.8 Ops/sec
.fill(dummy).map(callback) - 100 000 elements	1379.0 Ops/sec

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

Related benchmarks:

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

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: 10 months ago by: Guest

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

.fill(dummy).map(callback) - 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 2 months ago):