특정 항목을 제거할 때는 다음 방법으로 제거해도 괜찮습니다.

const items = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
const index = items.findIndex(item => item.id === 3); // 2
const nextItems = [...items].splice(index, 1);
console.log(nextItems);

findIndex 내장 함수는 배열에서 특정 조건을 만족하는 원소의 index 값을 조회합니다. 배열의 내장 함수 splice는 사실 불변성을 지키는 함수가 아닙니다. 하지만 이 함수를 사용하기 전에 [...items] 코드를 사용해 기존 items 배열 안에 있던 내용들을 넣은 새로운 배열을 만들었기 때문에 items 배열은 변함없이 기존 상태를 그대로 유지하게 됩니다. 따라서 작업 자체는 기존 items의 불변성을 유지합니다.

이 책에서는 filter 사용을 권장합니다. filter를 사용하는 편이 간결하기 때문이죠.

4.1.2.3 항목 수정하기

불변성을 지키면서 배열의 특정 항목을 수정하는 방법도 다양합니다. 그 중에서 가장 추천하는 방식은 배열의 내장 함수 map을 사용하는 것입니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]