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

61K/s

Map small array

30K/s

Find large array

146/s

Map large array

117/s

View exact numbers

Test name	Executions per second
✓ Find small array	61,414 Ops/sec
Map small array	30,219 Ops/sec
Find large array	146 Ops/sec
Map large array	117 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; });