Modifica di un elemento per id in JavaScript

Sia nella variabile arr un array di oggetti:

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',
  },
];

Supponiamo di voler modificare un elemento dell'array. Siano i nuovi dati memorizzati in una variabile, ad esempio, come questi:

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

Nell'oggetto fornito, id coincide con id del secondo elemento dell'array, mentre i valori delle proprietà sono diversi. In altre parole, in data, la proprietà id contiene id dell'elemento dell'array che vogliamo modificare.

Eseguiamo questa modifica. Per fare ciò, itereremo gli elementi dell'array con un ciclo e, se id coincide con quello cercato, eseguiremo la sostituzione dell'elemento, altrimenti lasceremo l'elemento invariato:

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

È possibile abbreviare il codice, utilizzando l'operatore ternario:

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