Benchmark: iterating from a filled object VS iterating from a map

Script Preparation code:

var smallArray = Array.from(Array(100).keys());
var bigArray = Array.from(Array(1000000).keys());

var constructObjectByAppendingToIt = (arr) => {
  const obj = {}
  for (const index of arr) {
    obj[index] = { someProp: index };
  }
  return obj
}

var smallFilledObject = constructObjectByAppendingToIt(smallArray);
var bigFilledObject = constructObjectByAppendingToIt(bigArray);

var smallMap = new Map(smallArray.map((index) => [index, { someProp: index }]));
var bigMap = new Map(bigArray.map((index) => [index, { someProp: index }]));

Tests:

small - ITERATE on filled object
for (const [index, value] of Object.entries(smallFilledObject)) { value.someProp ** 2; }
big - ITERATE on filled object
for (const [index, value] of Object.entries(bigFilledObject)) { value.someProp ** 2; }
small - ITERATE on map
for (const [index, value] of smallMap) { value.someProp ** 2; }
big - ITERATE on map
for (const [index, value] of bigMap) { value.someProp ** 2; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
small - ITERATE on filled object
big - ITERATE on filled object
small - ITERATE on map
big - ITERATE on map

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

**Benchmark Purpose**

The provided JSON represents a JavaScript benchmark that compares the performance of iterating over an object versus a map in JavaScript. The goal is to determine which approach is more efficient and faster for common use cases.

**Options Compared**

There are two primary options compared:

1. **Object Iteration**: This involves using `Object.entries()` to iterate over an object, accessing each property-value pair as an array.
2. **Map Iteration**: This involves using the `for...of` loop or `Map.forEach()` to iterate over a map (an implementation of the Map interface).

**Pros and Cons**

* **Object Iteration**:
	+ Pros: Widely supported in older browsers, easier to implement for existing codebases.
	+ Cons: Can be slower due to object lookup and property access overhead.
* **Map Iteration**:
	+ Pros: Generally faster than object iteration, especially for larger datasets. Maps are implemented as hash tables, which provide fast lookups and iterations.
	+ Cons: Less widely supported in older browsers (although it's been added to newer versions), may require additional setup or imports.

**Library Usage**

The `Map` library is used in the benchmark. A map is a data structure that stores key-value pairs, allowing for efficient lookups and iterations. In JavaScript, maps are implemented as an object that uses a hash table to store its elements.

**Special JS Feature/Syntax**

None mentioned.

**Other Alternatives**

If you prefer or need alternative approaches:

* **Array Iteration**: You can also use `for...of` loop with arrays, which would be similar to map iteration.
* **For-In Loop**: Another option is using the `for-in` loop with objects, although it's generally slower than `Object.entries()`.

**Benchmark Preparation Code**

The code defines two helper functions: `constructObjectByAppendingToIt()` and `new Map()`. The first function constructs an object by appending elements to an initial empty object. The second creates a new map using the `Map` constructor, passing in an array of key-value pairs.

In the benchmark preparation code, small and large arrays are generated using `Array.from()` and used to create both objects and maps. These are then iterated over using the different methods (object, map, or array) and operations (squaring property values).

**Latest Benchmark Results**

The results show that iterating over a map is generally faster than iterating over an object for this specific benchmark. The execution speeds vary depending on the browser and device platform used.

I hope this explanation helps you understand the benchmark's purpose and options!

Latest run results:

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

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
small - ITERATE on filled object	454211.7 Ops/sec
big - ITERATE on filled object	6.5 Ops/sec
small - ITERATE on map	2862654.8 Ops/sec
big - ITERATE on map	183.6 Ops/sec

Related benchmarks:

iterating from a filled object VS iterating from a map (version: 0)

Comparing the overall performance when iterating on an object VS when iterating on a map

Comparing performance of: small - ITERATE on filled object vs big - ITERATE on filled object vs small - ITERATE on map vs big - ITERATE on map

Created: 3 years ago by: Guest

Jump to the latest result

small - ITERATE on filled object

big - ITERATE on filled object

small - ITERATE on map

big - ITERATE on map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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