JavaScript에서 id로 요소 변경하기

변수 arr에 객체 배열이 있다고 가정해 봅시다:

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

배열의 어떤 요소를 변경하고 싶다고 가정해 봅시다. 새 데이터가 변수에 저장되어 있다고 가정합니다. 예를 들어, 다음과 같습니다:

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

주어진 객체에서 id는 배열의 두 번째 요소의 id와 일치하며, 속성 값은 다릅니다. 즉, data의 id 속성에는 변경하려는 배열 요소의 id가 저장되어 있습니다.

이 변경을 수행해 봅시다. 이를 위해 배열 요소를 반복문으로 순회하고, id가 찾는 값과 일치하면 요소를 바꾸고, 일치하지 않으면 요소를 그대로 둡니다:

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

삼항 연산자를 사용하여 코드를 줄일 수 있습니다:

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