문제 상황
다음과 같이 여러 영화 정보를 담고 있는 객체 배열이 있다고 가정해 보겠습니다.
const arr = [
{id: "1", name: "Snatch", type: "crime"},
{id: "2", name: "Witches of Eastwick", type: "comedy"},
{id: "3", name: "X-Men", type: "action"},
{id: "4", name: "Ordinary People", type: "drama"},
{id: "5", name: "Billy Elliot", type: "drama"},
{id: "6", name: "Toy Story", type: "children"}
];
여기서 우리가 작성해야 할 함수는 객체 배열을 첫 번째 인수로, id 문자열을 두 번째 인수로 받습니다. 그런 다음 해당 id와 일치하는 객체를 검색하고, 배열 안에 그 객체가 존재하면 배열에서 제거하면 됩니다.
해결 접근 방식
이 문제는 크게 두 단계로 해결할 수 있습니다.
- 1단계:
findIndex()메서드를 사용해 전달받은 id와 일치하는 객체의 인덱스를 찾습니다. - 2단계: 일치하는 객체가 있으면
splice()메서드로 해당 인덱스의 요소를 제거합니다.
만약 일치하는 객체가 없다면 -1이 반환되므로, 이 경우에는 false를 반환하여 제거에 실패했음을 알려주는 것이 좋습니다.
코드 예제
const arr = [
{id: "1", name: "Snatch", type: "crime"},
{id: "2", name: "Witches of Eastwick", type: "comedy"},
{id: "3", name: "X-Men", type: "action"},
{id: "4", name: "Ordinary People", type: "drama"},
{id: "5", name: "Billy Elliot", type: "drama"},
{id: "6", name: "Toy Story", type: "children"}
];
const removeById = (arr, id) => {
const requiredIndex = arr.findIndex(el => {
return el.id === String(id);
});
if(requiredIndex === -1){
return false;
};
return !!arr.splice(requiredIndex, 1);
};
removeById(arr, 5);
console.log(arr);
실행 결과
위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다. id가 "5"인 'Billy Elliot' 항목이 성공적으로 제거된 것을 확인할 수 있습니다.
[
{ id: '1', name: 'Snatch', type: 'crime' },
{ id: '2', name: 'Witches of Eastwick', type: 'comedy' },
{ id: '3', name: 'X-Men', type: 'action' },
{ id: '4', name: 'Ordinary People', type: 'drama' },
{ id: '6', name: 'Toy Story', type: 'children' }
]
코드 설명
- findIndex(): 콜백 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 조건에 맞는 요소가 없으면
-1을 반환합니다. - String(id): 배열 내 id 값은 문자열이므로, 숫자형으로 전달된 인수도 문자열로 변환하여 타입까지 정확하게 비교합니다.
- splice(requiredIndex, 1): 찾은 인덱스 위치부터 1개의 요소를 제거하며, 원본 배열을 직접 수정합니다(in-place 연산).
- !! 연산자: splice의 반환값을 불리언으로 변환하여, 제거 성공 시
true, 실패 시false를 명확하게 반환합니다.
참고로 원본 배열을 변경하지 않고 새로운 배열을 얻고 싶다면 splice() 대신 filter() 메서드를 사용하는 방법도 고려해 볼 수 있습니다.