JavaScript 배열에서 특정 요소를 제거하는 방법: Array.prototype.remove() 직접 구현하기

JavaScript에는 배열에서 특정 값을 제거하는 전용 메서드가 기본적으로 제공되지 않습니다. 이번 글에서는 배열 프로토타입에 추가할 수 있는 커스텀 함수 Array.prototype.remove()를 직접 구현해 보겠습니다.

요구 사항

remove() 함수는 다음 조건을 충족해야 합니다.

• 인자로 콜백 함수 또는 배열의 요소가 될 수 있는 값 하나를 받습니다.
• 인자가 함수라면, 그 함수의 반환값을 배열에서 찾아야 할 대상 요소로 간주합니다.
• 조건에 맞는 요소를 원본 배열에서 직접(in-place) 찾아 삭제합니다.
• 요소를 찾아 삭제했으면 true, 찾지 못했으면 false를 반환합니다.

구현 코드

const arr = [12, 45, 78, 54, 1, 89, 67];
const names = [{
    fName: 'Aashish',
    lName: 'Mehta'
}, {
    fName: 'Vivek',
    lName: 'Chaurasia'
}, {
    fName: 'Rahul',
    lName: 'Dev'
}];
const remove = function(val){
    let index;
    if(typeof val === 'function'){
        index = this.findIndex(val);
    }else{
        index = this.indexOf(val);
    };
    if(index === -1){
        return false;
    };
    return !!this.splice(index, 1)[0];
};
Array.prototype.remove = remove;
console.log(arr.remove(54));
console.log(arr);
console.log(names.remove((el) => el.fName === 'Vivek'));
console.log(names);

코드 동작 방식

1. typeof val === 'function' 조건으로 인자가 함수인지 판별합니다. 함수라면 findIndex()를 사용해 조건을 만족하는 첫 번째 요소의 인덱스를 찾고, 일반 값이라면 indexOf()로 인덱스를 구합니다.
2. 인덱스가 -1이면 해당 요소가 배열에 없다는 의미이므로 false를 반환합니다.
3. splice(index, 1)로 해당 위치의 요소를 원본 배열에서 제거한 뒤, !! 연산자로 결과값을 불리언 타입으로 변환해 반환합니다.

실행 결과

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

true
[ 12, 45, 78, 1, 89, 67 ]
true
[
    { fName: 'Aashish', lName: 'Mehta' },
    { fName: 'Rahul', lName: 'Dev' }
]

참고 사항

원본 배열을 변경하지 않고 새로운 배열을 얻고 싶다면 filter() 메서드를 사용하는 것이 좋습니다. 반면 위의 remove()처럼 splice()를 활용하면 원본 배열 자체를 수정하면서 제거된 요소의 존재 여부까지 한 번에 확인할 수 있습니다. 다만 실무 환경에서는 내장 객체의 프로토타입을 직접 수정하면 예기치 않은 부작용이 발생할 수 있으므로, 독립적인 유틸리티 함수 형태로 분리해서 사용하는 것도 안전한 대안입니다.