Benchmark: fill then map (with null/undefined/""/0) vs for loop vs array.from

Tests:

Array.from() only
Array.from({ length: 100 }, (_, i) => i+i);
Array.from().map()
Array.from({ length: 100 }).map((_, i) => i+i);
.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);
.fill(0).map()
Array(100).fill(0).map((_, i) => i+i);
For loop
const a = new Array(100) for(let i = 0; i < a.lenght; i++) a[i] = i+i

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from() only
Array.from().map()
.fill("").map()
.fill(null).map()
.fill(undefined).map()
.fill(true).map()
.fill(0).map()
For loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from() only	392602.2 Ops/sec
Array.from().map()	438687.4 Ops/sec
.fill("").map()	4258787.0 Ops/sec
.fill(null).map()	4221849.5 Ops/sec
.fill(undefined).map()	4257582.0 Ops/sec
.fill(true).map()	4243179.0 Ops/sec
.fill(0).map()	4714552.0 Ops/sec
For loop	37116912.0 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 benchmark and its test cases.

**Benchmark Definition**

The benchmark is called "fill then map (with null/undefined/\"\"/0) vs for loop vs array.from". This name suggests that the benchmark is comparing three different approaches to achieve a similar result:

1. `fill` method followed by `map` method
2. For loop with manual indexing and assignment
3. Using `Array.from()` constructor

**Options Compared**

The benchmark compares these three options in terms of their performance, which can be measured by the number of executions per second.

**Pros and Cons of Each Approach**

1. **fill then map**: This approach is efficient when you need to fill an array with a constant value and then perform an operation on each element. However, it can lead to memory issues if the array grows too large, as it creates multiple intermediate arrays.
2. **For loop**: Manual indexing and assignment in a for loop can be slow due to the overhead of managing the index variable. However, this approach allows for more control over the iteration process and is often suitable when working with small arrays or complex logic.
3. **Array.from()**: Using `Array.from()` can provide better performance than manual indexing and assignment, as it leverages the browser's optimized array construction algorithm. However, it may not be as efficient as the `fill` method followed by `map`, especially for large arrays.

**Library Used**

In this benchmark, no specific library is used beyond the built-in JavaScript functions like `Array.from()`, `map()`, and `fill()`.

**Special JS Features or Syntax**

There are no special JS features or syntax used in these test cases. They use standard JavaScript constructs to demonstrate the performance differences between the three approaches.

**Other Alternatives**

If you're interested in exploring other alternatives, here are a few options:

* **Array.prototype.reduce()**: Instead of using `map()` and then concatenating/merging arrays, you can use `reduce()` to accumulate results.
* **Set or Map data structures**: If the performance-critical part is filtering out duplicates or maintaining key-value pairs, using sets or maps might offer better performance.

In conclusion, this benchmark provides a straightforward way to compare the performance of different approaches for common array operations. By understanding the trade-offs and considerations mentioned above, you can choose the best approach depending on your specific use case and requirements.

Related benchmarks:

fill then map (with null/undefined/""/0) vs for loop vs array.from (version: 0)

Comparing performance of: Array.from() only vs Array.from().map() vs .fill("").map() vs .fill(null).map() vs .fill(undefined).map() vs .fill(true).map() vs .fill(0).map() vs For loop

Created: 2 years ago by: Guest

Jump to the latest result

Array.from() only

Array.from().map()

.fill("").map()

.fill(null).map()

.fill(undefined).map()

.fill(true).map()

.fill(0).map()

For loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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