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

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 5 runs

.fill(true).map()

2.8M/s

.fill("").map()

2.8M/s

.fill(undefined).map()

2.8M/s

.fill(null).map()

2.8M/s

Array.from().map()

380K/s

Array.from() only

345K/s

Fastest: .fill(true).map() (8.3x faster)

View exact numbers

✓ .fill(true).map(): 2,847,710 ops/sec
• .fill("").map(): 2,800,939 ops/sec
• .fill(undefined).map(): 2,792,708 ops/sec
• .fill(null).map(): 2,778,600 ops/sec
• Array.from().map(): 380,070 ops/sec
• Array.from() only: 344,793 ops/sec

Mobile Results:

Chrome 6 runs

.fill(undefined).map()

852K/s

.fill(true).map()

844K/s

.fill("").map()

841K/s

.fill(null).map()

838K/s

Array.from().map()

110K/s

Array.from() only

94K/s

Fastest: .fill(undefined).map() (9.0x faster)

View exact numbers

✓ .fill(undefined).map(): 852,196 ops/sec
• .fill(true).map(): 844,032 ops/sec
• .fill("").map(): 840,772 ops/sec
• .fill(null).map(): 837,851 ops/sec
• Array.from().map(): 110,309 ops/sec
• Array.from() only: 94,435 ops/sec

Safari 6 runs

Array.from() only

3.6M/s

Array.from().map()

1.8M/s

.fill(null).map()

1.2M/s

.fill("").map()

1.2M/s

.fill(undefined).map()

1.2M/s

.fill(true).map()

1.2M/s

Fastest: Array.from() only (3.1x faster)

View exact numbers

✓ Array.from() only: 3,623,562 ops/sec
• Array.from().map(): 1,787,721 ops/sec
• .fill(null).map(): 1,177,933 ops/sec
• .fill("").map(): 1,174,504 ops/sec
• .fill(undefined).map(): 1,172,346 ops/sec
• .fill(true).map(): 1,167,314 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

.fill(true).map()

2.8M/s

.fill("").map()

2.8M/s

.fill(undefined).map()

2.8M/s

.fill(null).map()

2.8M/s

Array.from().map()

380K/s

Array.from() only

345K/s

View exact numbers

Test name	Executions per second
✓ .fill(true).map()	2,847,710 Ops/sec
.fill("").map()	2,800,939 Ops/sec
.fill(undefined).map()	2,792,708 Ops/sec
.fill(null).map()	2,778,600 Ops/sec
Array.from().map()	380,070 Ops/sec
Array.from() only	344,793 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.

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

Go to the latest result

Array.from() only

Array.from().map()

.fill("").map()

.fill(null).map()

.fill(undefined).map()

.fill(true).map()

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 5 runs

Mobile Results:

Chrome 6 runs

Safari 6 runs

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/"") 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

Go to the latest result

Array.from() only

Array.from().map()

.fill("").map()

.fill(null).map()

.fill(undefined).map()

.fill(true).map()

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 5 runs

Mobile Results:

Chrome 6 runs

Safari 6 runs

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