Benchmark: Map lookup vs array index lookup

Script Preparation code:


var map = new Map();
var arrLookup = [];
var items = [];

for (var i = 0; i < 100; i++) {
  	items[i] = [];
	for (var j = 0; j < 100; j++) {
      	items[i][j] = [i,j];
		if (Math.random() < 0.1) {
        	map.set(i+","+j, Math.random()>=0.5);
          	if (!arrLookup[i]) arrLookup[i] = [];
          	arrLookup[i][j] = Math.random()>=0.5;
		}
	}
}

Tests:

Map lookup
var results = [], i, j; for (i = 0; i < 100; i++) { for (j = 0; j < 100; j++) { if (map.has(items[i][j] +"")) results.push(map.get(items[i][j]+"")); } } if (results.length === 0) throw Error();
Array lookup
var results = [], i, j; for (i = 0; i < 100; i++) { for (j = 0; j < 100; j++) { if (arrLookup[i] && typeof arrLookup[i][j] !== "undefined") results.push(arrLookup[i][j]); } } if (results.length === 0) throw Error();

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 13 runs

Array lookup

10K/s

Map lookup

402/s

Fastest: Array lookup (25.1x faster)

View exact numbers

✓ Array lookup: 10,096 ops/sec
• Map lookup: 402 ops/sec

Firefox 9 runs

Array lookup

16K/s

Map lookup

252/s

Fastest: Array lookup (62.4x faster)

View exact numbers

✓ Array lookup: 15,705 ops/sec
• Map lookup: 252 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 lookup
Array lookup

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Browser/OS: Chrome 149 on Windows

View result in a separate tab

Array lookup

10K/s

Map lookup

408/s

View exact numbers

Test name	Executions per second
✓ Array lookup	10,096 Ops/sec
Map lookup	408 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 provided benchmark.

**Benchmark Definition**

The website tests two different approaches to perform a look-up operation: using an array (`arrLookup`) and using a `Map` data structure (`map`).

In the script preparation code, we see:

*   We create two arrays: `items` (which contains nested arrays) and `arrLookup`.
*   We populate the `items` array with 100x100 nested arrays.
*   For each element in the `items` array, we randomly decide whether to add an element to both `map` and `arrLookup`. If we choose to add it to `map`, we use the string representation of the key (`i+","+j`) to store a random value.

**Options Compared**

We have two options:

1.  **Array Lookup**: We access elements in `arrLookup` using their index (`items[i][j]`). This approach is straightforward but may be slower for large arrays.
2.  **Map Lookup**: We use the `has()` and `get()` methods of the `map` object to look up values by key. This approach provides faster lookup times, especially when dealing with a large number of keys.

**Pros and Cons**

*   **Array Lookup:**
    *   Pros:
        +   Easy to implement and understand.
        +   Suitable for small arrays or sparse data structures.
    *   Cons:
        +   May be slower due to array indexing operations.
        +   Less flexible than `Map` lookup when dealing with large amounts of data.
*   **Map Lookup:**
    +   Pros:
        -   Faster lookup times, especially for large datasets.
        -   More flexible and efficient way to store and retrieve key-value pairs.
    *   Cons:
        +   May be more complex to implement and understand.
        +   Requires additional memory to store the `map` object.

**Library/Feature**

The benchmark uses JavaScript's built-in `Map` data structure. The purpose of this library is to provide a fast and efficient way to store and retrieve key-value pairs in JavaScript.

**Special JS Features/Syntax**

There are no special features or syntax used in this benchmark that would require additional explanation.

**Alternatives**

If you wanted to compare these approaches, you could also consider using other data structures like:

1.  **Object**: You can use objects instead of arrays to store key-value pairs. However, accessing elements by key will be slower than array indexing.
2.  **Sparse Arrays**: If your data structure is sparse (i.e., most elements are null or undefined), you might want to consider using a sparse array instead.

Keep in mind that the performance differences between these approaches will depend on the specific use case and the size of the data being processed.

Map lookup vs array index lookup (version: 0)

Comparing performance of: `Map lookup vs Array lookup`

Created: 9 years ago by: Guest

Go to the latest result

Map lookup

Array lookup

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 13 runs

Firefox 9 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 lookup vs array index lookup (version: 0)

Comparing performance of: Map lookup vs Array lookup

Created: 9 years ago by: Guest

Go to the latest result

Map lookup

Array lookup

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Chrome 13 runs

Firefox 9 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 lookup vs Array lookup`