JavaScript 배열에서 특정 요소 제거하기 — 가변 인자로 여러 값 한 번에 삭제하는 방법

다음과 같이 문자열 리터럴로 구성된 배열이 있다고 가정해 보겠습니다.

const arr = ['cat','dog','elephant','lion','tiger','mouse'];

우리가 작성해야 할 함수는 첫 번째 인자로 위와 같은 배열을 받고, 두 번째 인자부터는 제거하고 싶은 문자열을 원하는 개수만큼 전달받는 JavaScript 함수입니다.

그리고 이 함수는 인자로 전달된 문자열과 일치하는 모든 요소를 새로운 배열을 만들지 않고 원본 배열 자체에서(in-place) 직접 제거해야 합니다.

동작 원리

핵심 아이디어는 다음과 같습니다.

• 나머지 매개변수(Rest Parameter): ...removeArr 문법을 사용하면 두 번째 인자부터 끝까지 전달된 모든 값이 하나의 배열로 자동 수집됩니다.
• 요소 탐색: indexOf() 메서드로 제거할 값이 배열 내 어느 위치에 있는지 찾습니다. 존재하지 않으면 -1을 반환합니다.
• 요소 제거: splice(index, 1)을 호출해 해당 위치의 요소 하나를 원본 배열에서 삭제합니다.

구현 예제

이를 구현한 전체 코드는 다음과 같습니다.

const arr = ['cat','dog','elephant','lion','tiger','mouse'];
const removeFromArray = (arr, ...removeArr) => {
    removeArr.forEach(item => {
        const index = arr.indexOf(item);
        if(index !== -1){
            arr.splice(index, 1);
        };
    });
}
removeFromArray(arr, 'dog', 'lion');
console.log(arr);

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다. 'dog'와 'lion'이 성공적으로 제거된 것을 확인할 수 있습니다.

[ 'cat', 'elephant', 'tiger', 'mouse' ]

참고 사항

만약 동일한 값이 배열 안에 여러 번 중복되어 있다면, 위 코드는 반복 실행 시 앞쪽부터 하나씩 제거하므로 각 항목당 한 번씩만 호출됩니다. 중복 값을 모두 제거하고 싶다면 while(arr.indexOf(item) !== -1) 형태의 반복문으로 감싸주면 됩니다. 또한 indexOf() 대신 ES6의 includes()로 존재 여부를 먼저 확인하는 방식도 가능합니다.