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

AخA
 
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);
const result = array1000.map(() => true);
.fill(value) - 1 000 elements
const result = new Array(array1000.length).fill(true);
const result = new Array(array1000.length).fill(true);
.map(callback) - 10 000 elements
const result = array10000.map(() => true);
const result = array10000.map(() => true);
.fill(value) - 10 000 elements
const result = new Array(array10000.length).fill(true);
const result = new Array(array10000.length).fill(true);
.map(callback) - 100 000 elements
const result = array100000.map(() => true);
const result = array100000.map(() => true);
.fill(value) - 100 000 elements
const result = new Array(array100000.length).fill(true);
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)
const result = new Array(array100000.length).fill(0).map(() => true)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

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:

map(callback) with a dummy value (an empty object).
fill(value) with a non-zero value.
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:

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.
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.
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.

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: