Benchmark: Object key access vs array find 100 items yeh ok

Script Preparation code:

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

Tests:

Object access
items.forEach(item => objContainer[item.value])
Array find
items.forEach(item => arrContainer.find(containerItem => containerItem.value === item.value))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object access
Array find

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.1

View result in a separate tab

Test name	Executions per second
Object access	155812.2 Ops/sec
Array find	61349.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

On MeasureThat.net, the provided JSON represents a JavaScript benchmark that compares two approaches to accessing data in an object versus an array.

The test case creates an array of 100 objects with a unique key-value pair for each item. The code then populates two containers: an object container (`objContainer`) and an array container (`arrContainer`).

Two individual test cases are defined:

1. "Object access": This test uses the `forEach` method to iterate over the array and find the matching objects in the `objContainer` using a key-based lookup.
2. "Array find": This test uses the `find` method to search for an object with a specific value within the array.

**Options compared**

The two approaches being compared are:

1. **Object access** (using `forEach` and key-based lookup in `objContainer`)
2. **Array find** (using `find` and value-based comparison within `arrContainer`)

**Pros and Cons of each approach:**

1. **Object access**:
	* Pros:
		+ Fast lookups, as the browser can directly access the property using the key.
		+ May be faster for large datasets with a consistent key structure.
	* Cons:
		+ Requires that the object keys are unique and not null or undefined.
		+ May require additional memory to store the object container.
2. **Array find**:
	* Pros:
		+ More flexible than object access, as it can handle arrays of any data type.
		+ Does not require unique keys.
	* Cons:
		+ May be slower due to the overhead of searching through the array.
		+ Can be more memory-intensive for large datasets.

**Library and purpose**

No libraries are used in this specific benchmark. However, it's worth noting that if you were to use a library like Lodash, which provides utility functions for working with arrays and objects, the `find` method might be even faster or more convenient than using native JavaScript methods.

**Special JS feature or syntax (not mentioned)**

No special JavaScript features or syntax are used in this benchmark.

Related benchmarks:

Object key access vs array find 100 items yeh ok (version: 0)

Test speed of object access by key vs array find to find object

Comparing performance of: Object access vs Array find

Created: 2 years ago by: Guest

Jump to the latest result

Object access

Array find

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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