Benchmark: @techsavvytravvy - fill then map (with null/undefined/"") vs array.from

Tests:

.fill("").map()
Array(100).fill("").map((_, i) => i+i);
.fill(null).map()
Array(100).fill(null).map((_, i) => i+i);
.fill(undefined).map()
Array(100).fill(null).map((_, i) => i+i);
.fill(true).map()
Array(100).fill(true).map((_, i) => i+i);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.fill("").map()
.fill(null).map()
.fill(undefined).map()
.fill(true).map()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 121 on Android

View result in a separate tab

Test name	Executions per second
.fill("").map()	1109655.2 Ops/sec
.fill(null).map()	1087130.8 Ops/sec
.fill(undefined).map()	1141503.5 Ops/sec
.fill(true).map()	1137588.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares four different approaches to mapping over an array in JavaScript:

1. `.fill(undefined).map()`
2. `.fill(true).map()`
3. `.fill("").map()`
4. `Array(100).fill(null).map((_, i) => i+i)`
5. `Array(100).fill("").map((_, i) => i+i)` (not explicitly compared in the benchmark results)

The benchmark is designed to measure the performance of these different approaches.

**Approaches Compared**

1. **`.fill(undefined).map()`**: This approach uses the `.fill()` method with an undefined value, followed by the `map()` method.
	* Pros: Simple and straightforward syntax.
	* Cons: Might be slower due to the unnecessary step of filling the array with undefined values.
2. **`.fill(true).map()`**: This approach uses the `.fill()` method with a true value, followed by the `map()` method.
	* Pros: Similar to the previous approach, but with a more common and concise syntax.
	* Cons: Still might be slower due to the unnecessary step of filling the array with true values.
3. **`.fill("").map()`**: This approach uses the `.fill()` method with an empty string, followed by the `map()` method.
	* Pros: Similar to the previous approaches, but with a more common and concise syntax.
	* Cons: Might be slower due to the unnecessary step of filling the array with empty strings.
4. **`Array(100).fill(null).map((_, i) => i+i)`**: This approach uses the `Array()` constructor to create an array, followed by the `.fill()` method with a null value, and then the `map()` method.
	* Pros: More explicit and verbose syntax, which might be beneficial for developers who prefer more control over their code.
	* Cons: Might be slower due to the additional steps involved.

**Library Used**

None of the provided approaches rely on any external libraries. However, it's worth noting that some JavaScript engines (like V8) provide built-in optimizations and micro-optimizations that can affect performance.

**Special JS Features/Syntax**

None of the approaches explicitly use special JavaScript features or syntax. However, it's worth mentioning that the `map()` method is a modern JavaScript feature introduced in ECMAScript 2015 (ES6).

**Benchmark Results Interpretation**

The provided benchmark results show the performance of each approach on a Chrome Mobile 121 device with an Android operating system. The results are sorted by execution per second, with the fastest approach at the top.

* `.fill(undefined).map()` is the fastest approach, with an average of approximately 1.13 executions per second.
* `.fill(true).map()` and `.fill("").map()` are similar in performance, but slightly slower than the previous approach.
* `Array(100).fill(null).map((_, i) => i+i)` is the slowest approach, with an average of approximately 0.94 executions per second.

**Other Alternatives**

Some alternative approaches that might be worth considering include:

* Using a loop instead of `map()`: This can be faster for small arrays or specific use cases.
* Using a more optimized data structure (like an array of primitive values) instead of an array of objects.
* Using parallel processing or concurrent execution to take advantage of multi-core CPUs.
* Optimizing the algorithm itself by reducing the number of iterations or using more efficient mathematical operations.

Related benchmarks:

@techsavvytravvy - fill then map (with null/undefined/"") vs array.from (version: 0)

Comparing performance of: .fill("").map() vs .fill(null).map() vs .fill(undefined).map() vs .fill(true).map()

Created: 2 years ago by: Guest

Jump to the latest result

.fill("").map()

.fill(null).map()

.fill(undefined).map()

.fill(true).map()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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