Benchmark: Map key access vs array find

Script Preparation code:

var items = Array.from(Array(1000), (_,x) => ({key: x, value: x*10}));

var objContainer = new Map();
var arrContainer = [];

for (let i = 100; i >= 0; i--) {
  const index = Math.floor(Math.random() * 1000);
  const item = items[index];
  objContainer.set(item.key,item);
  arrContainer.push(item)
}

​x
 
var items = Array.from(Array(1000), (_,x) => ({key: x, value: x*10}));​var objContainer = new Map();var arrContainer = [];​for (let i = 100; i >= 0; i--) {  const index = Math.floor(Math.random() * 1000);  const item = items[index];  objContainer.set(item.key,item);  arrContainer.push(item)}

Tests:

Array find
items.forEach(item => arrContainer.find(containerItem => containerItem.value === item.value))
items.forEach(item => arrContainer.find(containerItem => containerItem.value === item.value))
Map access
items.forEach(item => objContainer.get(item.value))
items.forEach(item => objContainer.get(item.value))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Array find
Map access

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array find	1234.4 Ops/sec
Map access	13112.9 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated 5 months ago):

Let's dive into the benchmark definition and results.

Benchmark Definition

The test case is called "Map key access vs array find". The goal of this benchmark is to compare the performance of accessing elements in two different data structures: JavaScript Maps (with keys) and arrays. The test case consists of two individual tests:

Array find: This test uses the find() method on an array (arrContainer) to search for an element with a specific value.
Map access: This test uses the get() method on a JavaScript Map (objContainer) to retrieve an element by its key.

Script Preparation Code

The script prepares two containers: objContainer (a JavaScript Map) and arrContainer (an array). It populates both containers with 1000 objects, each containing a key-value pair. The objects are generated randomly from the items array.

Test Cases

There are two test cases:

Array find: This test iterates over the items array and for each item, it uses the find() method on arrContainer to search for an object with a value equal to the current item's value.
Map access: This test iterates over the items array and for each item, it uses the get() method on objContainer to retrieve an object with a key equal to the current item's value.

Latest Benchmark Results

The results show the execution time (Executions Per Second) of both tests on Chrome 123. The Map access test executes at approximately 13112 times per second, while the Array find test executes at around 1234 times per second.

Library Used

No external library is used in this benchmark.

JavaScript Features/Syntax Used

None specific to JavaScript features or syntax are mentioned in this benchmark.

Pros and Cons of Approaches

Map access (key-based):
- Pros: Faster access time (13112 EPS), as the Map can directly retrieve an element by its key.
- Cons: Requires a unique key for each element, which may not always be feasible or efficient in certain scenarios.
Array find:
- Pros: Can be used when there is no need for a unique key, and elements are accessed based on their value.
- Cons: Slower access time (1234 EPS) compared to Map access.

Other Alternatives

Other alternatives for accessing data in JavaScript include:

Objects: Similar to Maps, objects can be used with keys to store and retrieve values. However, objects have some limitations, such as not being able to use the same key multiple times.
Set: A Set is a collection of unique values that can be iterated over using a loop or the forEach() method. While it's faster than an array for lookups, it's not designed for direct access by value.
Database (IndexedDB): For more complex data storage and retrieval requirements, IndexedDB (a database system) can be used to store data in a structured format.

These alternatives should be considered based on the specific use case, performance requirements, and other factors such as scalability, maintainability, and development complexity.

LLMs can make mistakes. Check important info.

Let's dive into the benchmark definition and results.

**Benchmark Definition**

1. **Array find**: This test uses the `find()` method on an array (`arrContainer`) to search for an element with a specific value.
2. **Map access**: This test uses the `get()` method on a JavaScript Map (`objContainer`) to retrieve an element by its key.

**Script Preparation Code**

The script prepares two containers: `objContainer` (a JavaScript Map) and `arrContainer` (an array). It populates both containers with 1000 objects, each containing a key-value pair. The objects are generated randomly from the `items` array.

**Test Cases**

There are two test cases:

1. **Array find**: This test iterates over the `items` array and for each item, it uses the `find()` method on `arrContainer` to search for an object with a value equal to the current item's value.
2. **Map access**: This test iterates over the `items` array and for each item, it uses the `get()` method on `objContainer` to retrieve an object with a key equal to the current item's value.

**Latest Benchmark Results**

**Library Used**

No external library is used in this benchmark.

**JavaScript Features/Syntax Used**

None specific to JavaScript features or syntax are mentioned in this benchmark.

**Pros and Cons of Approaches**

* **Map access (key-based)**:
	+ Pros: Faster access time (13112 EPS), as the Map can directly retrieve an element by its key.
	+ Cons: Requires a unique key for each element, which may not always be feasible or efficient in certain scenarios.
* **Array find**:
	+ Pros: Can be used when there is no need for a unique key, and elements are accessed based on their value.
	+ Cons: Slower access time (1234 EPS) compared to Map access.

**Other Alternatives**

Other alternatives for accessing data in JavaScript include:

1. **Objects**: Similar to Maps, objects can be used with keys to store and retrieve values. However, objects have some limitations, such as not being able to use the same key multiple times.
2. **Set**: A Set is a collection of unique values that can be iterated over using a loop or the `forEach()` method. While it's faster than an array for lookups, it's not designed for direct access by value.
3. **Database (IndexedDB)**: For more complex data storage and retrieval requirements, IndexedDB (a database system) can be used to store data in a structured format.

These alternatives should be considered based on the specific use case, performance requirements, and other factors such as scalability, maintainability, and development complexity.

Related benchmarks:

Map key access vs array find (version: 0)

Comparing performance of: Array find vs Map access

Created: 2 years ago by: Guest

Jump to the latest result

Array find

Map access

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 5 months ago):