Benchmark: Array.map vs preallocation

Tests:

Map
const array2 = new Array(1000000).fill(0).map((item, index) => index);
Preallocation
const array2 = new Array(1000000).fill(0); for (let i = 0; i < array2.length; i++) array2[i] = i;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map
Preallocation

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
Map	68.3 Ops/sec
Preallocation	278.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its results in a way that's easy to understand for software engineers, regardless of their familiarity with JavaScript.

**Benchmark Overview**

The benchmark compares two approaches for filling an array with values: `Array.map()` (also known as "map" method) and preallocation using a simple loop. The goal is to measure which approach is faster in generating the array.

**Approaches Compared**

There are two approaches being compared:

1. **`Array.map()`**: This method takes a callback function as an argument, which returns the value for each element in the array. In this benchmark, the callback function simply returns the index of the element.
2. **Preallocation using a loop**: Instead of using `Array.map()`, this approach preallocates an empty array and then fills it with values using a simple loop.

**Pros and Cons**

* **`Array.map()`**:
	+ Pros: concise, readable, and easy to maintain code.
	+ Cons: may incur overhead due to the callback function, which can lead to slower performance for large arrays.
* **Preallocation using a loop**:
	+ Pros: direct control over the array elements, potentially faster performance since it avoids the callback function overhead.
	+ Cons: less concise and readable code.

**Library Used**

There is no library explicitly mentioned in this benchmark. However, the use of `Array.map()` suggests that the JavaScript engine being used (e.g., V8 in Chrome) has optimized this method for performance.

**Special JS Feature or Syntax**

This benchmark uses a feature called "arrow functions" (introduced in ECMAScript 2015), which allows defining small, concise functions using the `=>` operator. The callback function in the `Array.map()` example is an arrow function.

**Test Results**

The latest benchmark results show that:

* For preallocation, the test runs approximately **293 executions per second** on Chrome Mobile 128 with Android.
* For `Array.map()`, the test runs approximately **66 executions per second** on the same device and browser configuration.

These results suggest that preallocation using a loop is significantly faster than using `Array.map()` for generating an array of size 1,000,000. However, it's essential to note that this benchmark might not be representative of all scenarios or use cases where these approaches are used.

**Alternatives**

Other alternatives for filling an array with values include:

* Using a library like Lodash or Underscore.js, which provide more expressive and flexible ways of manipulating arrays.
* Utilizing other methods like `Array.prototype.fill()` or `Array.from()`, which might offer better performance depending on the specific use case.

Keep in mind that these alternatives might introduce additional overhead or change the behavior of your code, so it's essential to carefully evaluate their trade-offs before choosing an approach.

Related benchmarks:

Array.map vs preallocation (version: 0)

Comparing performance of: Map vs Preallocation

Created: 4 years ago by: Registered User

Jump to the latest result

Map

Preallocation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):