JavaScript Array 프로토타입에 커스텀 find 함수 직접 구현하기

문제 소개

이번 글에서는 Array 클래스의 프로토타입 객체에 직접 정의해서 사용할 수 있는 JavaScript 함수를 만들어 보겠습니다. 이 함수는 콜백 함수를 인자로 받으며, 콜백 함수가 true를 반환하는 첫 번째 요소를 그대로 반환해야 합니다.

내장 Array.prototype.find 메서드와 유사하게 동작하며, 콜백 함수에는 현재 요소를 첫 번째 인자로, 현재 인덱스를 두 번째 인자로 전달합니다.

구현 예제

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

const arr = [4, 67, 24, 87, 15, 78, 3];

Array.prototype.customFind = function(callback){
    for(let i = 0; i < this.length; i++){
        const el = this[i];
        if(callback(el, i)){
            return el;
        };
        continue;
    };
    return undefined;
};

console.log(arr.customFind(el => el % 5 === 0));

실행 결과

15

코드 설명

위 코드의 동작 방식을 단계별로 살펴보겠습니다.

먼저 customFind 함수를 Array.prototype에 추가하면, 모든 배열 인스턴스에서 이 메서드를 호출할 수 있게 됩니다. 함수 내부에서는 this를 통해 메서드를 호출한 배열 자체에 접근합니다.

그다음 for 반복문으로 배열을 처음부터 끝까지 순회하면서 각 요소와 인덱스를 콜백 함수에 전달합니다. 콜백 함수가 참을 반환하는 순간 해당 요소를 즉시 반환하고, 끝까지 조건을 만족하는 요소가 없으면 undefined를 반환합니다.

예제에서 사용된 콜백 함수 el => el % 5 === 0은 5로 나누어 떨어지는 요소를 찾습니다. 배열 [4, 67, 24, 87, 15, 78, 3]에서 처음으로 5의 배수에 해당하는 요소는 15이므로, 결과값으로 15가 출력됩니다.

마치며

참고로 JavaScript에는 이미 동일한 기능을 제공하는 내장 메서드 Array.prototype.find가 존재합니다. 실무에서는 안정성과 성능 면에서 내장 메서드를 사용하는 것이 좋으며, 이처럼 직접 구현해 보는 과정은 프로토타입 체인과 고차 함수의 동작 원리를 깊이 이해하는 데 큰 도움이 됩니다.