Benchmark: Map vs preallocation

Script Preparation code:

var array = new Array(1000000).fill(0);

Tests:

Map
const array2 = array.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 11 community runs

Desktop Results:

Chrome 6 runs

Preallocation

551/s

Map

125/s

Fastest: Preallocation (4.4x faster)

View exact numbers

✓ Preallocation: 551 ops/sec
• Map: 125 ops/sec

Firefox 5 runs

Preallocation

165/s

Map

152/s

View exact numbers

✓ Preallocation: 165 ops/sec
• Map: 152 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: 11 months 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

Preallocation

646/s

Map

117/s

View exact numbers

Test name	Executions per second
✓ Preallocation	646 Ops/sec
Map	117 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain what's being tested in the provided JSON benchmark.

**What is being tested?**

The benchmark is comparing two approaches:

1. **Map**: The first test case uses the `Array.prototype.map()` method to create a new array, where each element is set to its index.
2. **Preallocation**: The second test case manually creates an array of 1 million elements using the `Array` constructor and then assigns values to each element.

**Options compared**

The benchmark is comparing two options:

* Using the `map()` method to create a new array
* Manual preallocation of array elements

**Pros and Cons**

**Map approach:**

Pros:

* Concise and expressive code
* Easier to maintain and update, as changes can be made in one place (the `map()` callback function)
* Reduced memory allocation and copying overhead

Cons:

* May incur additional overhead due to the creation of a new array object
* Can lead to slower performance for very large arrays, since JavaScript engines need to allocate memory for each element

**Preallocation approach:**

Pros:

* Faster execution time, as it avoids the overhead of creating a new array object and copying elements
* More direct access to individual elements in the array

Cons:

* Requires more code and is less concise than the `map()` approach
* Can lead to slower performance due to increased memory allocation and copying overhead when pushing values into the array

**Other considerations**

When comparing these two approaches, it's essential to consider factors like:

* Array size: For very large arrays, the preallocation approach may be faster, but it also increases memory usage.
* Browser and JavaScript engine differences: The performance difference between `map()` and preallocation might vary across browsers and JavaScript engines.

**Library**

None of these options use a specific library. They are built-in JavaScript methods or simple array operations.

**Special JS feature or syntax**

There is no special JavaScript feature or syntax being used in this benchmark. It's purely about comparing two array creation approaches.

**Benchmark result interpretation**

The latest benchmark result shows that:

* The preallocation approach (`Preallocation`) executed 267.66595458984375 executions per second
* The `map()` approach (`Map`) executed 100.44690704345703 executions per second

This suggests that the preallocation approach is faster for this particular test case, but it's essential to note that results may vary depending on specific use cases and environments.

**Other alternatives**

If you're interested in exploring alternative approaches or libraries for array creation, here are a few options:

* Using `Buffer` or `TypedArray` constructors
* Utilizing `Array.prototype.set()` method (although this might have additional overhead)
* Leveraging third-party libraries like Lodash's `mapSize` function

Keep in mind that the best approach often depends on your specific requirements, use case, and performance constraints.

Map vs preallocation (version: 0)

Comparing performance of: `Map vs Preallocation`

Created: 5 years ago by: Guest

Go to the latest result

Map

Preallocation

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 6 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Map vs preallocation (version: 0)

Comparing performance of: Map vs Preallocation

Created: 5 years ago by: Guest

Go to the latest result

Map

Preallocation

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 6 runs

Firefox 5 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`