Benchmark: Object key access vs array index access 10000

Script Preparation code:

var items = Array.from(
  Array(10000),
  (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)

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: 2 years 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

Object key access

3K/s

Array index access

3K/s

View exact numbers

Test name	Executions per second
✓ Object key access	3,437 Ops/sec
Array index access	3,364 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what's being tested.

**Benchmark Definition:**

The main purpose of this benchmark is to compare the performance of accessing an item in an object using its key versus accessing it from an array using its index. This is a fundamental operation in JavaScript, as objects and arrays are commonly used data structures.

**Script Preparation Code:**

The script preparation code creates two containers: `objContainer` (an object) and `arrContainer` (an array). It then populates these containers with 10,000 items, where each item has a unique key (its index in the original array) and a value calculated as 10 times its index. The script also prepares for testing by randomly selecting every 10th item from the array and assigning it to both the object and array containers.

**Html Preparation Code:**

There is no HTML preparation code provided, which means that this benchmark only tests JavaScript performance on the server-side.

**Individual Test Cases:**

There are two test cases:

1. **Object Key Access:** This test case uses the `forEach` method to iterate over the items in the array and access each item's value using its key in the object container. The syntax is: `items.forEach((item) => objContainer[item.key]?.value)`.

2. **Array Index Access:** This test case also uses the `forEach` method, but this time accesses each item's value directly from the array container using its index. The syntax remains the same as above: `items.forEach((item) => arrContainer[item.key]?.value)`.

**Libraries and Special JS Features:**

Neither of these test cases relies on any specific libraries or advanced JavaScript features. They use only built-in JavaScript methods (`Array.prototype.forEach`).

**Pros and Cons of Different Approaches:**

In general, accessing an item from an object using its key is often faster than accessing it from an array using its index for several reasons:

1. **Hashing:** Objects in JavaScript have a hash table-like structure under the hood, which allows for fast lookups by key.
2. **Cacheability:** Accessing a property on an object using its key can lead to cache hits, as the browser or engine may have already cached the result of previous accesses.

On the other hand, accessing an item from an array using its index involves:

1. **Linear search:** Arrays are stored in contiguous memory locations, so finding a specific element requires searching through all elements until it's found.
2. **No cacheability:** Array indices are typically integers and not property keys, making it harder for the browser or engine to cache results.

Overall, accessing an object by key is generally faster than accessing an array by index, especially for large datasets like in this benchmark.

**Other Alternatives:**

There are a few alternative ways to access elements from arrays:

1. **Using `Array.prototype.indexOf` and then accessing the element:** This involves finding the index of the desired element using `indexOf`, which can be slower than direct array indexing.
2. **Using other data structures, like `Map`:** A `Map` is a collection of key-value pairs that provides faster lookups compared to objects or arrays.

However, in this specific benchmark, using an object's property key for fast access and an array's index for comparison are the most relevant approaches.

Object key access vs array index access 10000 (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: 2 years ago by: Guest

Go to the latest result

Object key access

Array index access

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object key access vs array index access 10000 (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: 2 years ago by: Guest

Go to the latest result

Object key access

Array index access

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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