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 }]));
for (const [index, value] of Object.entries(smallFilledObject)) {
value.someProp ** 2;
}
for (const [index, value] of Object.entries(bigFilledObject)) {
value.someProp ** 2;
}
for (const [index, value] of smallMap) {
value.someProp ** 2;
}
for (const [index, value] of bigMap) {
value.someProp ** 2;
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
small - ITERATE on filled object | |
big - ITERATE on filled object | |
small - ITERATE on map | |
big - ITERATE on map |
Test name | Executions per second |
---|---|
small - ITERATE on filled object | 523470.5 Ops/sec |
big - ITERATE on filled object | 4.9 Ops/sec |
small - ITERATE on map | 3238170.5 Ops/sec |
big - ITERATE on map | 186.5 Ops/sec |
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:
Object.entries()
to iterate over an object, accessing each property-value pair as an array.for...of
loop or Map.forEach()
to iterate over a map (an implementation of the Map interface).Pros and Cons
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:
for...of
loop with arrays, which would be similar to map iteration.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!