How to replace object props inside array with other object

I have an array of objects like this one:

let arr1 = [{
    "ref": 1,
    "index": "300",
    "data": {
        "id": 10,
        "status": {
            "code": "red"
        }
    }
}, {
    "ref": 2,
    "index": "301",
    "data": {
        "id": 20,
        "status": {
            "code": "blue"
        }
    }
}];

I want to replace the status.code by the one given in this other array of objects:

let arr2 = [{
    "id": 10,
    "content": {
        "name": "green"
    }
}, {
    "id": 20,
    "content": {
        "name": "yellow"
    }
}];

My idea is to map the first array and the use the find function (or filter) to loop the second array and when the ID’s match change the values but I’m missing something, how can i do this the most optimized for performance and readability way?

let res: any[];
res = arr2.map((x: any) => 
    arr1.find((y: any) =>
        (y.data.id === x.id) ? 'logic if match' : 'return'
));

Answer

I would first change the format of arr2 in such a way that it is easier to access in such a format: (If you can easily change how you get this data, it would be better I think. Otherwise, transform the data as below.)

const idStatusCodeMap = {
  "10": "green",
  "20": "yellow"
}

We do this so we can just look if there is idStatusCodeMap[10] or idStatusCodeMap[anyId]. This makes it possible that you only loop through arr1, not a nested loop for both arr1 and arr2. Then, loop through arr1 and replace the colours if necessary. If suppose, a new colour is not found on idStatusCodeMap, such as for id = 30, then don’t do anything for that.

let arr1 = [{
  "ref": 1,
  "index": "300",
  "data": {
    "id": 10,
    "status": {
      "code": "red"
    }
  }
}, {
  "ref": 2,
  "index": "301",
  "data": {
    "id": 20,
    "status": {
      "code": "blue"
    }
  }
}];

let arr2 = [{
  "id": 10,
  "content": {
    "name": "green"
  }
}, {
  "id": 20,
  "content": {
    "name": "yellow"
  }
}];

let idStatusCodeMap = {}

//transpiling arr2 to more performant hashMap
arr2.forEach(item => {
  idStatusCodeMap[item.id] = item.content.name;
})

console.log(idStatusCodeMap);

arr1 = arr1.map(item => {
  //if the id of an item in arr1 is found in code map, replace it with new value.
  //if not found, it will skip.
  if(idStatusCodeMap[item.data.id]) {
    item.data.status.code = idStatusCodeMap[item.data.id]
  }
  return item;
})

console.log(arr1);