JavaScript 배열에서 특정 숫자 요소를 모두 제거하는 방법

문제 개요

숫자로 이루어진 배열과 하나의 숫자를 입력받아, 배열 안에서 해당 숫자가 나타나는 모든 항목을 제자리(in-place)에서 제거하는 함수를 작성해야 합니다. 여기서 '제자리'란 새로운 배열을 만들지 않고 원본 배열 자체를 직접 수정한다는 의미입니다.

재귀(Recursion)를 활용한 해결 방법

이 문제는 재귀 함수를 사용하면 깔끔하게 해결할 수 있습니다. 핵심 로직은 다음과 같습니다.

먼저 indexOf() 메서드로 배열에서 해당 숫자가 처음 등장하는 위치를 찾습니다. 만약 존재한다면(-1이 아니라면) splice() 메서드로 그 요소 하나를 제거한 뒤, 같은 함수를 다시 호출합니다. 더 이상 해당 숫자가 남아 있지 않으면 재귀 호출을 종료합니다.

예제 코드

const numbers = [1,2,0,3,0,4,0,5];

const removeElement = (arr, element) => {
  if(arr.indexOf(element) !== -1){
    arr.splice(arr.indexOf(element), 1);
    return removeElement(arr, element);
  };
  return;
};

removeElement(numbers, 0);
console.log(numbers);

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[ 1, 2, 3, 4, 5 ]

동작 원리 정리

위 코드의 실행 흐름을 단계별로 살펴보면 다음과 같습니다.

1. indexOf(element)로 배열에서 제거할 숫자의 첫 번째 인덱스를 찾습니다.
2. 숫자가 발견되면 splice(index, 1)을 통해 해당 위치의 요소 하나를 삭제합니다.
3. 변경된 배열을 인자로 삼아 자기 자신을 다시 호출하며, 남은 동일한 숫자를 계속 제거합니다.
4. indexOf()가 -1을 반환하면(더 이상 해당 숫자가 없으면) 재귀를 멈추고 종료합니다.

이 방식은 원본 배열을 직접 수정하므로 별도의 새 배열을 생성하지 않으며, 반복문 없이도 재귀만으로 모든 중복 항목을 손쉽게 제거할 수 있다는 장점이 있습니다.