Run results for: Map vs Find to change one el in array of objects

Run details:

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

Browser: Chrome 136

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Find small array

128K/s

Map small array

34K/s

Find large array

187/s

Map large array

130/s

View exact numbers

Test name	Executions per second
✓ Find small array	127,508 Ops/sec
Map small array	33,615 Ops/sec
Find large array	187 Ops/sec
Map large array	130 Ops/sec

Script Preparation code:

function getRandomElement(id) {
  return {
    id,
    a: Math.random(),
    b: Math.random(),
    c: Math.random(),
  }
}

function getArray(length) {
  const result = [];
  for (let i = 0; i < length; i++) {
    result.push(getRandomElement(i))
  }
  
  return result;
}

array_small = getArray(10000);
array_large = getArray(1000000);

Tests:

Find small array
const found = array_small.find(function(element) { return element.id == 9999; }); found.a = 9999;
Map small array
const array = array_small.map(function(element) { if (element.id == 9999) { element.a = 9999; } return element; });
Find large array
const found = array_large.find(function(element) { return element.id == 999999; }); found.a = 999999;
Map large array
const array = array_large.map(function(element) { if (element.id == 999999) { element.a = 999999; } return element; });