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
  }
}

​x
 
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)); }
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);
}

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Browser/OS: Chrome 101 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
Item map and enumerating values	16.3 Ops/sec
item array	21.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

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:

Array iteration: This involves iterating through an array to find and update the corresponding object.
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:

An object literal itemMap that maps item IDs to their corresponding objects.
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:

Item map and enumerating values: This test case iterates through the itemIdsToGet array and updates the corresponding object's value using direct object access.
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:

Benchmarking libraries: Libraries like Benchmark.js or Microbenchmark provide a structured way to write benchmarks.
Performance profiling tools: Tools like Chrome DevTools or Firefox Developer Edition provide built-in performance profiling capabilities.
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.

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.

Related benchmarks:

Array vs object literal (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

Item map and enumerating values