Modification d'un élément par id en JavaScript

Supposons que la variable arr contienne un tableau d'objets :

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

Supposons que nous voulions modifier un élément du tableau. Supposons que les nouvelles données soient stockées dans une variable, par exemple, comme ceci :

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

Dans l'objet donné, le id correspond au id du deuxième élément du tableau, mais les valeurs des propriétés sont différentes. En d'autres termes, dans data, la propriété id contient le id de l'élément du tableau que nous voulons modifier.

Effectuons cette modification. Pour cela, nous allons parcourir les éléments du tableau avec une boucle et, si le id correspond à celui recherché, nous effectuerons le remplacement de l'élément, sinon, nous laisserons l'élément inchangé :

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

Il est possible de raccourcir le code en utilisant l'opérateur ternaire :

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