Modificación de un elemento por id en JavaScript

Supongamos que en la variable arr hay un array de objetos:

javascriptlet arr = [
  {
    id: 'GYi9GauC4gBF1e2SixDvu',
    prop1: 'value11',
    prop2: 'value12',
    prop3: 'value13',
  },
  {
    id: 'IWSpfBPSV3SXgRF87uO74',
    prop1: 'value21',
    prop2: 'value22',
    prop3: 'value23',
  },
  {
    id: 'JAmjRlfQT8rLTm5tG2m1L',
    prop1: 'value31',
    prop2: 'value32',
    prop3: 'value33',
  },
];

Supongamos que queremos modificar algún elemento del array. Supongamos que los nuevos datos están almacenados en una variable, por ejemplo, así:

javascriptlet data = {
  id: 'IWSpfBPSV3SXgRF87uO74',
  prop1: 'value21 !',
  prop2: 'value22 !',
  prop3: 'value23 !',
};

En el objeto proporcionado, el id coincide con el id del segundo elemento del array, pero los valores de las propiedades son diferentes. En otras palabras, en data, en la propiedad id, tenemos almacenado el id de ese elemento del array que queremos modificar.

Hagamos este cambio. Para ello, recorreremos los elementos del array con un ciclo y, si el id coincide con el buscado, realizaremos el reemplazo del elemento, y si no coincide, dejaremos el elemento sin cambios:

javascriptlet res = arr.map(elem => {
  if (elem.id === data.id) {
    return data;
  } else {
    return elem;
  }
});

Podemos acortar el código usando el operador ternario:

javascriptlet res = arr.map(elem => elem.id === data.id ? data : elem);