Benchmark: Array.find vs Map

Script Preparation code:

var list = []
var map = new Map();
var SIZE = 1000;

for (let i = 0; i < SIZE; i++) {
    const item = { id: "ID-" + i, value: i};
    list.push(item)
    map.set(item.id, item)
}

​x
 
var list = []var map = new Map();var SIZE = 1000;​for (let i = 0; i < SIZE; i++) {    const item = { id: "ID-" + i, value: i};    list.push(item)    map.set(item.id, item)}

Tests:

Array.find performance

for (var i = 0; i < SIZE; i++) {
    const result = list.find((item) => item.id === "ID-" + i);
}

 
for (var i = 0; i < SIZE; i++) {    const result = list.find((item) => item.id === "ID-" + i);}​

Map.get performance
for (let i = 0; i < SIZE; i++) { const result = map.get("ID-" + i); }
for (let i = 0; i < SIZE; i++) {
const result = map.get("ID-" + i);
}

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 performance
Map.get performance

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 110 on Windows

View result in a separate tab

Test name	Executions per second
Array.find performance	123.4 Ops/sec
Map.get performance	6965.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

Let's break down the provided JSON and explain what is being tested.

Benchmark Definition

The benchmark is comparing two approaches: Array.find and Map.get. The script preparation code creates an array of 1000 objects and a Map with the same data. This allows us to test these two methods on the same dataset.

Options Compared

There are two options being compared:

Array.find: This method returns the value of the first element in the array that satisfies the provided testing function. In this case, it's used to find an object by its id property.
Map.get: This method returns the value associated with a given key in the Map.

Pros and Cons

Here are some pros and cons for each approach:

Array.find:
- Pros: Easy to use, readable code.
- Cons: May be slower than Map.get if you need to perform multiple lookups on the same array.
Map.get:
- Pros: Faster lookup times, especially if you need to perform multiple lookups on the same data. This is because Maps are implemented as hash tables, which provide constant-time performance for lookups.
- Cons: May require more code and setup than Array.find.

Library and Purpose

The library used in this benchmark is not explicitly mentioned in the provided JSON. However, it's likely that the JavaScript engine being tested is using a internal implementation of these methods. If you were to write your own implementation of these methods, you would need to consider factors such as cache coherence, data locality, and branch prediction.

Special JS Feature/Syntax

There doesn't appear to be any special JavaScript feature or syntax used in this benchmark.

Other Alternatives

If you wanted to test other approaches, you might consider:

Using a different data structure, such as a Set or a Linked List.
Adding additional operations between the Array.find and Map.get calls, such as filtering or sorting the array.
Testing with different sizes of datasets (e.g., 1000 vs. 10,000 vs. 100,000).
Using different browsers or JavaScript engines to see how their implementations compare.

Benchmark Preparation Code Explanation

The script preparation code creates an empty array list and a new Map map. It then sets the size of the dataset to 1000 using the SIZE variable. The loop creates 1000 objects with id properties that match the index value, and adds them to both the array and the map.

The HTML preparation code is not provided in the JSON, but it's likely that there would be some HTML elements set up to capture performance data from the browser.

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is being tested.

**Benchmark Definition**

The benchmark is comparing two approaches: `Array.find` and `Map.get`. The script preparation code creates an array of 1000 objects and a Map with the same data. This allows us to test these two methods on the same dataset.

**Options Compared**

There are two options being compared:

1. **Array.find**: This method returns the value of the first element in the array that satisfies the provided testing function. In this case, it's used to find an object by its `id` property.
2. **Map.get**: This method returns the value associated with a given key in the Map.

**Pros and Cons**

Here are some pros and cons for each approach:

* **Array.find**:
	+ Pros: Easy to use, readable code.
	+ Cons: May be slower than `Map.get` if you need to perform multiple lookups on the same array.
* **Map.get**:
	+ Pros: Faster lookup times, especially if you need to perform multiple lookups on the same data. This is because Maps are implemented as hash tables, which provide constant-time performance for lookups.
	+ Cons: May require more code and setup than `Array.find`.

**Library and Purpose**

**Special JS Feature/Syntax**

There doesn't appear to be any special JavaScript feature or syntax used in this benchmark.

**Other Alternatives**

If you wanted to test other approaches, you might consider:

* Using a different data structure, such as a Set or a Linked List.
* Adding additional operations between the `Array.find` and `Map.get` calls, such as filtering or sorting the array.
* Testing with different sizes of datasets (e.g., 1000 vs. 10,000 vs. 100,000).
* Using different browsers or JavaScript engines to see how their implementations compare.

**Benchmark Preparation Code Explanation**

The script preparation code creates an empty array `list` and a new Map `map`. It then sets the size of the dataset to 1000 using the `SIZE` variable. The loop creates 1000 objects with `id` properties that match the index value, and adds them to both the array and the map.

The HTML preparation code is not provided in the JSON, but it's likely that there would be some HTML elements set up to capture performance data from the browser.

Related benchmarks:

Array.find vs Map (version: 0)

Comparing performance of: Array.find performance vs Map.get performance

Created: 2 years ago by: Guest

Jump to the latest result