Run results for: iterating from a filled object VS iterating from a map

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:93.0) Gecko/20100101 Firefox/93.0

Browser: Firefox 93

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
small - ITERATE on filled object	119076.1 Ops/sec
big - ITERATE on filled object	3.4 Ops/sec
small - ITERATE on map	138808.7 Ops/sec
big - ITERATE on map	17.6 Ops/sec

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

Run results for: iterating from a filled object VS iterating from a map

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

small - ITERATE on filled object

big - ITERATE on filled object

small - ITERATE on map

big - ITERATE on map