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

Run details:

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

Browser: Chrome 125

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Find small array

73K/s

Map small array

33K/s

Find large array

165/s

Map large array

134/s

View exact numbers

Test name	Executions per second
✓ Find small array	73,252 Ops/sec
Map small array	33,152 Ops/sec
Find large array	165 Ops/sec
Map large array	134 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; });