JavaScript에서 id로 요소 변경하기

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

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

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

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

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

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

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

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

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

변수에 배열 요소의 id가 저장되어 있다고 가정합니다. 해당 버튼을 클릭하면 해당 배열 요소가 변경되는 버튼을 만드세요.