Benchmark: Array vs object literal v2

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:

map

const values = setup();

for  (const itemIdToUpdate of values.itemIdsToGet) {
  values.itemMap[itemIdToUpdate].value = 'updated'
}

 
const values = setup();​for  (const itemIdToUpdate of values.itemIdsToGet) {  values.itemMap[itemIdToUpdate].value = 'updated'}

array

const values = setup();

for  (const itemIdToUpdate of values.itemIdsToGet) {
  const index = values.itemArr.findIndex(x => x.id === itemIdToUpdate);
  
  values.itemArr[index].value = 'updated';

}

 
const values = setup();​for  (const itemIdToUpdate of values.itemIdsToGet) {  const index = values.itemArr.findIndex(x => x.id === itemIdToUpdate);    values.itemArr[index].value = 'updated';​}

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
map
array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36

Browser/OS: Chrome 97 on Windows

View result in a separate tab

Test name	Executions per second
map	177.5 Ops/sec
array	182.3 Ops/sec

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

Benchmark Overview

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing the performance of different approaches for various use cases.

The provided benchmark definition represents a test case where two methods are compared:

Array Literal: This method uses an array to store and update values.
Object Literal (Map): This method uses an object literal (map) to store and update values.

Options Compared

The two options being compared are:

array: The "array" option, which uses an array to store and update values. In this case, it finds the index of the item in the array using findIndex() and then updates the value at that index.
map: The "map" option, which uses an object literal (map) to store and update values.

Pros and Cons

Array Literal (array):
- Pros: Simple and easy to understand. It's a common approach in JavaScript for iterating over arrays.
- Cons: May have performance overhead due to the use of findIndex() and array indexing, which can be slower than object literal (map) lookup.
Object Literal (Map):
- Pros: Fast and efficient, as it uses direct object property access. It's a good choice when you need to look up values by key.
- Cons: May require more memory, depending on the size of the map.

Library Used

In this benchmark, no libraries are explicitly mentioned, but the use of findIndex() and array indexing suggests that JavaScript's built-in Array methods are being used.

Special JS Feature or Syntax

There is no special JavaScript feature or syntax used in this benchmark. It's a straightforward implementation of two common approaches to updating values in arrays.

Other Alternatives

If you wanted to test other alternatives, here are some options:

Using forEach() instead of findIndex() and array indexing
Using a different data structure, such as a linked list or a trie
Adding additional logic or overhead, such as caching or async operations

Note that the performance characteristics of these alternatives would depend on the specific use case and requirements.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing the performance of different approaches for various use cases.

The provided benchmark definition represents a test case where two methods are compared:

1. **Array Literal**: This method uses an array to store and update values.
2. **Object Literal (Map)**: This method uses an object literal (map) to store and update values.

**Options Compared**

The two options being compared are:

* `array`: The "array" option, which uses an array to store and update values. In this case, it finds the index of the item in the array using `findIndex()` and then updates the value at that index.
* `map`: The "map" option, which uses an object literal (map) to store and update values.

**Pros and Cons**

* **Array Literal (array)**:
	+ Pros: Simple and easy to understand. It's a common approach in JavaScript for iterating over arrays.
	+ Cons: May have performance overhead due to the use of `findIndex()` and array indexing, which can be slower than object literal (map) lookup.
* **Object Literal (Map)**:
	+ Pros: Fast and efficient, as it uses direct object property access. It's a good choice when you need to look up values by key.
	+ Cons: May require more memory, depending on the size of the map.

**Library Used**

In this benchmark, no libraries are explicitly mentioned, but the use of `findIndex()` and array indexing suggests that JavaScript's built-in Array methods are being used.

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax used in this benchmark. It's a straightforward implementation of two common approaches to updating values in arrays.

**Other Alternatives**

If you wanted to test other alternatives, here are some options:

* Using `forEach()` instead of `findIndex()` and array indexing
* Using a different data structure, such as a linked list or a trie
* Adding additional logic or overhead, such as caching or async operations

Note that the performance characteristics of these alternatives would depend on the specific use case and requirements.

Related benchmarks:

Array vs object literal v2 (version: 0)

Comparing performance of: map vs array

Created: 3 years ago by: Guest

Jump to the latest result

map