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

변수에 요소의 id, 변경할 속성 이름 및 속성의 새 값이 저장되어 있다고 가정합니다:

let id = 'IWSpfBPSV3SXgRF87uO74';
let prop = 'prop1';
let value = '!!!';

이 문제를 해결하기 위해 구조 분해 할당과 계산된 속성명을 사용하는 것이 편리합니다:

let res = arr.map(elem => {
	if (elem.id === id) {
		return {...elem, [prop]: value};
	} else {
		return elem;
	}
});

다음 변수들이 주어졌습니다:

let id = 'JAmjRlfQT8rLTm5tG2m1L';
let prop = 'prop2';

버튼을 만들어 클릭 시 지정된 id를 가진 배열 요소를 찾아, 해당 요소에서 지정된 이름의 속성을 가져와 그 속성 값의 끝에 기호 '!'를 추가하세요.

두 개의 속성 이름 변수가 주어졌다고 가정합니다:

let id = 'JAmjRlfQT8rLTm5tG2m1L';
let prop1 = 'prop2';
let prop2 = 'prop3';

이전 작업을 수정하여 클릭 시 두 개의 지정된 속성이 동시에 변경되도록 하세요.

이론에서 제시된 해결 방법을 Object.assign을 사용한 객체 복사를 통해 다시 작성하세요.