JavaScript Array.prototype.filter() 직접 구현하기 – 커스텀 필터 함수 만들기

문제 상황

JavaScript의 Array 클래스 프로토타입에 내장 메서드 filter()와 동일하게 동작하는 사용자 정의 함수를 구현해야 합니다.

이 함수는 콜백 함수를 유일한 인자로 받아야 하며, 배열의 각 요소마다 해당 콜백 함수를 호출해야 합니다. 이때 콜백 함수는 현재 요소와 그 요소의 인덱스, 두 가지 값을 인자로 전달받습니다. 콜백 함수가 true를 반환하면 해당 요소를 결과 배열에 포함하고, 그렇지 않으면 제외합니다.

구현 방법

핵심 로직은 다음과 같습니다.

• 결과를 담을 빈 배열을 하나 생성합니다.
• for 반복문으로 원본 배열을 순회하면서 각 요소와 인덱스를 콜백 함수에 전달합니다.
• 콜백 함수가 참(true) 값을 반환하면 해당 요소를 결과 배열에 추가합니다.
• 순회가 끝나면 완성된 결과 배열을 반환합니다.

예제 코드

다음은 실제 구현 코드입니다.

const arr = [5, 3, 6, 2, 7, -4, 8, 10];
const isEven = num => num % 2 === 0;
Array.prototype.customFilter = function(callback){
    const res = [];
    for(let i = 0; i < this.length; i++){
        const el = this[i];
        if(callback(el, i)){
            res.push(el);
        };
    };
    return res;
};
console.log(arr.customFilter(isEven));

출력 결과

[ 6, 2, -4, 8, 10 ]

위 코드에서 isEven은 숫자가 짝수인지 판별하는 콜백 함수입니다. customFilter는 이 콜백을 활용해 주어진 배열에서 짝수만 골라내어 새로운 배열 [6, 2, -4, 8, 10]을 반환합니다. 이처럼 프로토타입에 직접 메서드를 추가하면 내장 filter()와 같은 방식으로 체이닝하여 사용할 수 있습니다.