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;

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Preallocation

252/s

Map

61/s

Fastest: Preallocation (4.1x faster)

View exact numbers

✓ Preallocation: 252 ops/sec
• Map: 61 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
Map
Preallocation

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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

Preallocation

278/s

Map

68/s

View exact numbers

Test name	Executions per second
✓ Preallocation	278 Ops/sec
Map	68 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

Array.map vs preallocation (version: 0)

Comparing performance of: `Map vs Preallocation`

Created: 5 years ago by: Registered User

Go to the latest result

Map

Preallocation

Historical Performance Data aggregated from 6 community runs

Desktop Results:

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

Array.map vs preallocation (version: 0)

Comparing performance of: Map vs Preallocation

Created: 5 years ago by: Registered User

Go to the latest result

Map

Preallocation

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 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: `Map vs Preallocation`