Benchmark: Array vs object literal

Script Preparation code:

function setup() {

  const randInt = (min, max) =>
      Math.floor(Math.random() * (max - min + 1) + min);

  const itemMap = {};
  const itemArr = [];

  for (let i = 0; i < 10000; i++) {
      const item = {
          id: randInt(0, 1000000),
          value: `value-${randInt(0, 1000000)}`
      };
      itemArr.push(item);
      itemMap[item.id] = item;
  }

  const itemIdsToGet = [itemArr[8002].id, itemArr[2423].id, itemArr[5322].id, itemArr[3].id, itemArr[7242].id]
  
  return {
    itemIdsToGet,
    itemMap,
    itemArr
  }
}

Tests:

Item map and enumerating values
const values = setup(); for (const itemIdToUpdate of values.itemIdsToGet) { values.itemMap[itemIdToUpdate].value = 'updated' console.log(Object.values(values.itemMap)); }
item array
const values = setup(); for (const itemIdToUpdate of values.itemIdsToGet) { const index = values.itemArr.findIndex(x => x.id === itemIdToUpdate); values.itemArr[index].value = 'updated'; console.log(values.itemArr); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Item map and enumerating values
item array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 20 days ago)

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

Browser/OS: Firefox 151 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Item map and enumerating values	186.3 Ops/sec
item array	367.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

The benchmark compares two approaches to update and log the values of objects in an array versus using an object literal.

In the "Array" approach, the code iterates through the `itemIdsToGet` array and finds the corresponding index in the `itemArr` array. It then updates the value at that index in the `itemArr` array.

In the "Object Literal" approach, the code directly accesses the object literal using the `itemIdToUpdate` key.

**Options being compared**

The two options being compared are:

1. **Array iteration**: This involves iterating through an array to find and update the corresponding object.
2. **Direct Object Access**: This involves directly accessing the object using its key (in this case, `itemIdToUpdate`).

**Pros and Cons of each approach:**

* **Array Iteration**:
	+ Pros: Can handle cases where the order of the objects in the array doesn't matter.
	+ Cons: Can be slower due to the overhead of iterating through the array.
* **Direct Object Access**: 
	+ Pros: Typically faster since it avoids iteration through an array.
	+ Cons: May not work if the object's key is not present or has changed.

**Library and purpose**

There is no explicit library mentioned in this benchmark. However, the `findIndex` method used in the "Array" approach is a native JavaScript method that belongs to the Array prototype.

**Special JS feature or syntax**

None are explicitly mentioned.

**Benchmark preparation code explanation**

The `setup()` function creates two data structures:

1. An object literal `itemMap` that maps item IDs to their corresponding objects.
2. An array `itemArr` that contains objects with `id` and `value` properties.

The `for` loop generates 10,000 random items and populates the `itemArr` array. The `itemIdsToGet` array is then generated by selecting a subset of item IDs from the first 8,022 items in the array (randomly chosen).

**Individual test cases**

There are two test cases:

1. **Item map and enumerating values**: This test case iterates through the `itemIdsToGet` array and updates the corresponding object's value using direct object access.
2. **item array**: This test case iterates through the `itemIdsToGet` array and finds the corresponding index in the `itemArr` array, then updates the value at that index.

**Alternatives**

Some alternatives to benchmarking JavaScript performance include:

1. **Benchmarking libraries**: Libraries like Benchmark.js or Microbenchmark provide a structured way to write benchmarks.
2. **Performance profiling tools**: Tools like Chrome DevTools or Firefox Developer Edition provide built-in performance profiling capabilities.
3. **Manual timing tests**: Using `Date` objects or `performance.now()` to manually measure execution times.

In summary, this benchmark compares two approaches to update and log the values of objects in an array versus using an object literal. The "Array" approach involves iteration through an array, while the "Object Literal" approach uses direct access to the object.

Related benchmarks:

Array vs object literal (version: 0)

Comparing performance of: Item map and enumerating values vs item array

Created: 4 years ago by: Guest

Jump to the latest result

Item map and enumerating values

item array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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