Benchmark: Object key access vs array find 15 items

Script Preparation code:

var items = Array.from(Array(15), (_,x) => ({key: x, value: x*10}));

var objContainer = {};
var arrContainer = [];

for (let i = 15; i >= 0; i--) {
  const index = Math.floor(Math.random() * 15);
  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: 2 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Mac OS X 10.15

View result in a separate tab

Object access

73.3M/s

Array find

5.2M/s

View exact numbers

Test name	Executions per second
✓ Object access	73,322,344 Ops/sec
Array find	5,191,622 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark titled "Object key access vs array find 15 items" investigates the performance differences between accessing object properties by their keys and finding elements within an array using the `Array.find` method.

### Description of Test Cases

1. **Object Access**
   - **Benchmark Definition**: `items.forEach(item => objContainer[item.value])`
   - **Description**: This test measures the speed of directly accessing object properties using keys. In the preparation phase, an object (`objContainer`) is populated with keys ranging from 0 to 14, and `item.value` corresponds to these keys. The access involves retrieving values directly from the object using these keys.

2. **Array Find**
   - **Benchmark Definition**: `items.forEach(item => arrContainer.find(containerItem => containerItem.value === item.value))`
   - **Description**: This test measures the performance of searching through an array (`arrContainer`) to find an object whose `value` matches the current item's `value`. The `Array.find` method iterates over the array to locate the first matching item.

### Performance Comparison

- **Pros of Object Access**:
  - **Speed**: Accessing properties directly via keys in an object is generally much faster due to the way JavaScript engines optimize object property lookups. This is reflected in the benchmark results, where object access was executed approximately 14 million times per second.
  - **Simplicity**: Object access is straightforward and does not require iteration, making it less computationally expensive.

- **Cons of Object Access**:
  - **Memory Consumption**: Objects can consume more memory if many properties are created, especially if keys are not efficiently managed.

- **Pros of Array Find**:
  - **Flexibility**: Using an array allows for more straightforward data manipulation in cases where the objects have a variable structure or if order needs to be preserved.
  - **Simplicity for Small Data Sets**: In smaller datasets, using an array can be more intuitive and easier to manage visually.

- **Cons of Array Find**:
  - **Performance**: The `Array.find` method requires iteration over the array for each access, which greatly impacts performance, as shown by the benchmark results where it executed around 926,000 times per second.
  - **Time Complexity**: The approach has a time complexity of O(n) for each access, making it significantly slower than object access, especially as data sizes increase.

### Other Considerations

- **Data Structure Choice**: 
  - If the primary use case involves frequent key-based lookups, using an object (or a `Map`, which is optimized for such operations) is preferable. Arrays are better suited for scenarios where the data needs to be maintained in a specific order or is frequently iterated over.
  
- **Alternative Methods**:
  - For key-based lookups similar to objects, `Map` can be utilized. While it provides key-value storage similar to objects, it maintains insertion order and allows various types for keys, which can be beneficial in certain scenarios.
  - Using libraries like **Lodash**, which provides utility functions for collections, could also be considered for more complex operations on arrays, including searching, mapping, and filtering, albeit with a potential performance trade-off due to added overhead.

In summary, this benchmark provides clear insights into the performance trade-offs between object key access and array searches, highlighting the superior efficiency of direct object property access in terms of speed and computational cost.

Object key access vs array find 15 items (version: 1)

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

Comparing performance of: `Object access vs Array find`

Created: one year ago by: Guest

Go to the latest result

Object access

Array find

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Object key access vs array find 15 items (version: 1)

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

Comparing performance of: Object access vs Array find

Created: one year ago by: Guest

Go to the latest result

Object access

Array find

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

Comparing performance of: `Object access vs Array find`