자바스크립트 배열에서 특정 요소를 제거하는 방법

숫자로 이루어진 배열이 있고, 여기에 여러 요소가 추가되어 있다고 가정해 봅시다. 이때 배열에서 특정 요소를 손쉽게 제거할 수 있는 방법이 필요합니다.

우리가 원하는 동작은 다음과 같습니다.

array.remove(number);

프레임워크나 외부 라이브러리는 사용할 수 없으며, 오직 코어 자바스크립트(Core JavaScript)만으로 구현해야 합니다.

구현 아이디어

핵심은 Array.prototype.splice() 메서드입니다. splice()는 지정한 인덱스부터 원하는 개수만큼 요소를 삭제할 수 있어, 특정 값과 일치하는 모든 요소를 제거하는 데 적합합니다. 반복문 안에서 요소를 발견하면 splice()로 삭제하고, 이때는 인덱스를 증가시키지 않아야 합니다. 삭제 후 뒤의 요소들이 앞으로 당겨지기 때문입니다.

예제 코드

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

const arr = [2, 5, 9, 1, 5, 8, 5];
const removeInstances = function(el){
    const { length } = this;
    for(let i = 0; i < this.length; ){
       if(el !== this[i]){
          i++;
          continue;
       }
       else{
          this.splice(i, 1);
       };
   };
   // 하나라도 요소가 제거되면 true, 아니면 false 반환
   if(this.length !== length){
      return true;
   };
   return false;
};
Array.prototype.removeInstances = removeInstances;
console.log(arr.removeInstances(5));
console.log(arr);

코드 설명

removeInstances 함수는 제거하려는 값을 인자로 받습니다. 함수가 호출되기 전 배열의 길이를 먼저 저장해 두고, 반복문을 돌며 각 요소를 대상 값과 비교합니다. 값이 일치하지 않으면 인덱스를 1 증가시키고, 일치하면 해당 위치에서 요소를 삭제합니다. 마지막에는 배열 길이가 줄었는지 확인하여, 요소가 실제로 제거되었는지 여부를 불리언 값으로 반환합니다.

Array.prototype에 직접 추가했기 때문에 모든 배열 인스턴스에서 arr.removeInstances(5)처럼 자연스럽게 호출할 수 있습니다.

실행 결과

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

true
[ 2, 9, 1, 8 ]

값 5가 세 번 등장했지만 모두 성공적으로 제거되어, 최종 배열은 [2, 9, 1, 8]이 되었습니다. 또한 요소가 제거되었음을 알리는 true가 반환된 것도 확인할 수 있습니다.