Benchmark: Object key access vs array index access

Script Preparation code:

var items = Array.from(
  Array(1000),
  (item, index) => ({ key: index, value: index*10 })
);
var objContainer = new Object();
var arrContainer = new Array(items.length);

// For a tenth of the number of items...
for (let i = items.length/10; i >= 0; i--) {
  // Choose a random item
  const index = Math.floor(Math.random() * items.length);
  const item = items[index];

  // Assign the item to the object and array containers
  objContainer[item.key] = item;
  arrContainer[item.key] = item;
}

Tests:

Object key access
items.forEach((item) => objContainer[item.key]?.value)
Array index access
items.forEach((item) => arrContainer[item.key]?.value)

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 29 runs

Object key access

31K/s

Array index access

31K/s

View exact numbers

✓ Object key access: 31,478 ops/sec
• Array index access: 31,167 ops/sec

Firefox 8 runs

Object key access

88K/s

Array index access

76K/s

Fastest: Object key access (1.2x faster)

View exact numbers

✓ Object key access: 87,734 ops/sec
• Array index access: 76,144 ops/sec

Mobile Results:

Chrome 5 runs

Array index access

15K/s

Object key access

15K/s

View exact numbers

✓ Array index access: 14,978 ops/sec
• Object key access: 14,874 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
Object key access
Array index access

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Linux

View result in a separate tab

Object key access

79K/s

Array index access

77K/s

View exact numbers

Test name	Executions per second
✓ Object key access	78,508 Ops/sec
Array index access	76,704 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the provided JSON data.

**Benchmark Definition**

The benchmark tests two different approaches to accessing an item in a collection:

1. **Object key access**: This approach uses an object to store items, where each item is associated with a unique key (in this case, the index of the item). The test accesses an item by its key using `objContainer[item.key]?.value`.
2. **Array index access**: This approach uses an array to store items. The test accesses an item by its index using `arrContainer[item.key]?.value`.

**Script Preparation Code**

The preparation code generates a large collection of items (1000) and creates two containers: `objContainer` (an object) and `arrContainer` (an array). It then populates both containers with the same set of items, where each item has a key/index associated with it. This is done to ensure that both approaches are tested under the same conditions.

**Individual Test Cases**

There are two test cases:

1. **Object key access**: This test case uses the `items.forEach()` method to iterate over the collection and accesses each item by its key using `objContainer[item.key]?.value`.
2. **Array index access**: This test case is similar to the first one, but it uses an array (`arrContainer`) instead of an object (`objContainer`).

**Benchmark Result**

The latest benchmark result shows two measurements:

1. **Object key access**: On a Chrome 128 browser on Linux, this approach executes at approximately 19651.08 executions per second.
2. **Array index access**: On the same browser and platform, this approach executes at approximately 19425.18 executions per second.

**Library/Feature**

No external libraries or special JavaScript features are used in these tests.

**Pros and Cons**

Both approaches have their trade-offs:

* **Object key access**:
	+ Pros: Easier to read and write code when accessing items by name (e.g., `objContainer[item.key]`).
	+ Cons: Slower performance compared to array index access, as shown in the benchmark result.
* **Array index access**:
	+ Pros: Faster performance, especially for large collections.
	+ Cons: More verbose code when accessing items by index (e.g., `arrContainer[item.key]`).

**Other Alternatives**

Depending on the specific use case, other approaches might be suitable:

1. **Hash tables**: If you need to frequently access items by name and don't mind using a more complex data structure, consider using hash tables (e.g., `Map` in JavaScript).
2. **Custom indexing**: If you have a specific indexing scheme that's not aligned with the item's natural key/index, you might want to implement custom indexing logic.

In conclusion, this benchmark tests two common approaches to accessing items in a collection: object key access and array index access. While both methods have their pros and cons, the result shows that array index access is faster for large collections.

Object key access vs array index access (version: 0)

Tests the speed of accessing an item by object key vs array index.

Comparing performance of: `Object key access vs Array index access`

Created: 4 years ago by: Registered User

Go to the latest result

Object key access

Array index access

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 29 runs

Firefox 8 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

Object key access vs array index access (version: 0)

Tests the speed of accessing an item by object key vs array index.

Comparing performance of: Object key access vs Array index access

Created: 4 years ago by: Registered User

Go to the latest result

Object key access

Array index access

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 29 runs

Firefox 8 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

Related benchmarks

Comparing performance of: `Object key access vs Array index access`