JavaScript에서 배열 요소 불변성 유지하며 변경하기

이제 배열 내 요소를 불변성을 유지하며 변경하는 방법을 배워봅시다. 예를 들어 다음과 같은 배열이 있다고 가정해 보겠습니다:

let arr = [1, 2, 3, 4, 5];

변경할 요소의 인덱스가 변수 ind에 저장되어 있다고 합시다:

let ind = 3;

주어진 인덱스의 요소를 변경해 봅시다. 우리의 접근 방식에 따르면 배열의 복사본을 만들고 복사본에서 요소를 변경해야 합니다. 이를 수행해 보겠습니다:

let copy = Object.assign([], arr);
copy[ind] = '!';
let res = copy;

두 번째 접근 방식을 활용해 보겠습니다:

let res = [
	...arr.slice(0, ind),
	'!',
	...arr.slice(ind + 1)
];

버튼을 만들어 클릭 시 배열 요소가 변경되도록 하세요. 변경할 요소의 인덱스는 변수에 저장되어 있다고 가정합니다.