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: one year 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

For loop

37.1M/s

.fill(0).map()

4.7M/s

.fill("").map()

4.3M/s

.fill(undefined).map()

4.3M/s

.fill(true).map()

4.2M/s

.fill(null).map()

4.2M/s

Array.from().map()

439K/s

Array.from() only

393K/s

View exact numbers

Test name	Executions per second
✓ For loop	37,116,912 Ops/sec
.fill(0).map()	4,714,552 Ops/sec
.fill("").map()	4,258,787 Ops/sec
.fill(undefined).map()	4,257,582 Ops/sec
.fill(true).map()	4,243,179 Ops/sec
.fill(null).map()	4,221,850 Ops/sec
Array.from().map()	438,687 Ops/sec
Array.from() only	392,602 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.

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

Go 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):

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

Go 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):

Related benchmarks

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`