Benchmark: map vs array accessor

Script Preparation code:

window.ITEMS_ARRAY = Array(1000).fill(null).map((item, index) => {
    return {
        id: index,
        name: '10 Portable DVD player',
        description: 'diam neque vestibulum eget vulputate',
        price: {
            value: 66.04,
            currency: 'CNY'
        },
        status: 'Stocked on demand',
        statusColor: 'informative',
        date: new Date(),
        verified: true
    };
});

window.ITEMS_MAP = new Map(ITEMS_ARRAY.map((item, index) => [index, item]));

window.initialIndex = Math.floor(Math.random() * 500);

window.indexes = new Array(500).fill(null).map((item, index) => window.initialIndex + index);

Tests:

Accessing random index in array
window.indexes.forEach((index) => { const smt = window.ITEMS_ARRAY[index]; });
Accessing random index in map
window.indexes.forEach((index) => { const smt = window.ITEMS_MAP.get(index); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Accessing random index in array
Accessing random index in map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 26_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Brave/1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 26 on iOS 26.3

View result in a separate tab

Test name	Executions per second
Accessing random index in array	104363.6 Ops/sec
Accessing random index in map	91467.3 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents two JavaScript microbenchmarks on the MeasureThat.net website. The benchmarks aim to compare the performance of accessing elements at random indices in an array versus using a Map data structure.

**Benchmark Definition:**

The first benchmark, "map vs array accessor," defines two scripts that prepare the test environment:

1. `window.ITEMS_ARRAY`: An array of 1000 objects, each representing a product with various properties (id, name, price, etc.).
2. `window.ITEMS_MAP`: A Map data structure initialized with the same array of products.

**Options Compared:**

The benchmark compares two approaches to access elements at random indices:

1. **Array Accessor**: Using the `index` property to directly access an element in the `window.ITEMS_ARRAY`.
2. **Map Lookup**: Using the `get()` method on the `window.ITEMS_MAP` Map data structure to retrieve a value by its key (in this case, the index).

**Pros and Cons:**

* **Array Accessor**:
	+ Pros: Simple, direct access to elements.
	+ Cons: May incur slow performance due to array indexing.
* **Map Lookup**:
	+ Pros: Fast lookups using the `get()` method.
	+ Cons: Requires creating a Map data structure and may have additional overhead.

In general, using an array accessor can be slower than accessing elements directly through the `map` data structure. However, if you need to frequently access elements at specific indices, using an array might be more suitable.

**Library and Purpose:**

The `Map` data structure is a built-in JavaScript object that stores key-value pairs. In this benchmark, it's used to quickly look up values by their index (key). The `get()` method returns the value associated with the given key, or `undefined` if no such key exists.

**Special JS Feature/Syntax:**

The benchmark uses ES6 features, specifically:

* Arrow functions (`=>`) in the script preparation code.
* Template literals (`\r\n`) in the script preparation code.
* The `fill()` method to create an array of 1000 null elements.

These features are widely supported across modern JavaScript environments and are not considered special features or syntax for this explanation.

**Other Alternatives:**

If you prefer not to use arrays or Maps, other data structures can be used to access elements at random indices:

1. **Arrays with sparse indexing**: You can create an array with sparse indexing using the `Array.prototype.fill()` method and then accessing elements at specific indices.
2. **Objects with property lookups**: Instead of using an array or Map, you could use objects with property lookups to access elements at specific indices.

However, these alternatives may incur additional overhead or have different performance characteristics compared to using arrays or Maps.

Keep in mind that the choice of data structure and access method ultimately depends on your specific requirements, performance constraints, and personal preference.

Related benchmarks:

map vs array accessor (version: 0)

Comparing performance of: Accessing random index in array vs Accessing random index in map

Created: 2 years ago by: Guest

Jump to the latest result

Accessing random index in array

Accessing random index in map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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