Benchmark: fill then map (with null/undefined/"") 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);

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()

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.from() only	344792.5 Ops/sec
Array.from().map()	380070.2 Ops/sec
.fill("").map()	2800939.2 Ops/sec
.fill(null).map()	2778600.2 Ops/sec
.fill(undefined).map()	2792707.8 Ops/sec
.fill(true).map()	2847709.8 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 components.

**Benchmark Definition**
The benchmark is designed to compare the performance of two approaches:

1. `Array.from()` with an inline callback function.
2. `.fill()` followed by `.map()` on an array literal.

**Options Compared**

There are four options being compared:

* `Array.from() only` (option 1): using `Array.from()` to create an array and then applying a mapping function.
* `Array.from().map()` (option 2): creating an array with `Array.from()` and then immediately applying the `.map()` method.
* `.fill(\"\")`.map()` (option 3): initializing an array with `.fill(\"\")` and then applying the `.map()` method.
* `.fill(null).map()` (option 4): initializing an array with `.fill(null)` and then applying the `.map()` method.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **`Array.from() only`**: This approach allows for more control over the initial array creation, which can be beneficial if the mapping function depends on the previous elements in the array. However, it might incur additional overhead due to the extra step.
2. **`Array.from().map()`**: Creating an intermediate array with `Array.from()` and then applying `.map()` can lead to better performance because it avoids the overhead of creating multiple elements initially. This approach also makes it easier to compose multiple mappings in a single operation. However, if the mapping function depends on the previous elements, this approach might not work as intended.
3. **`.fill(\"\")`.map()`**: Using `.fill()` followed by `.map()` can be an efficient way to create and transform arrays without creating intermediate elements. This approach is suitable when the initial array needs to have a specific length or structure. However, it might lead to less control over the transformation process.
4. **`.fill(null).map()`**: Similar to option 3, this approach creates an initial array with `.fill(null)` and then applies `.map()`. It offers better performance than creating multiple elements initially but may limit the flexibility of the mapping function.

**Other Considerations**

* The use of `Array.from()` with inline callback functions can provide more flexibility in terms of transformation complexity.
* When working with large datasets, optimizing memory allocation and access patterns is crucial. This benchmark highlights the importance of considering these factors when choosing between different array creation methods.
* The presence of null or undefined values in the initial array can impact performance due to potential runtime errors or increased memory usage.

**Library/Utility Used**

In this benchmark, `Array.from()` is used as a utility function to create arrays. This method has been part of the JavaScript standard library since ECMAScript 2015 (ES6).

**Special JS Feature/Syntax**

There are no special features or syntaxes mentioned in this benchmark that would require additional explanation.

**Alternatives**

Some alternative approaches for array creation and transformation could include:

* Using `Array.prototype.slice()` or other slicing methods to create subsets of arrays.
* Implementing custom array algorithms using recursive or iterative techniques.
* Leveraging specialized libraries like Lodash or Ramda for functional programming operations on arrays.

Keep in mind that these alternatives might not always offer better performance or control compared to the methods being tested in this benchmark.

Related benchmarks:

fill then map (with null/undefined/"") 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()

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()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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