JavaScript로 Array.prototype.includes()와 유사한 커스텀 함수 직접 구현하기

JavaScript의 내장 메서드인 Array.prototype.includes()는 배열에 특정 값이 존재하는지 확인할 때 유용하게 사용됩니다. 이번 글에서는 이 메서드와 동일하게 동작하는 사용자 정의(커스텀) 함수를 프로토타입 객체에 직접 구현하는 방법을 알아보겠습니다.

문제 정의

배열의 프로토타입 객체(Array.prototype)에 정의되는 JavaScript 함수를 작성해야 합니다. 이 함수는 다음 조건을 만족해야 합니다.

• 하나의 리터럴 값을 인자로 받습니다.
• 해당 값이 함수가 호출된 배열 안에 존재하면 true를 반환합니다.
• 존재하지 않으면 false를 반환합니다.

예제 코드

다음은 위 문제를 해결하는 코드입니다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const num = 6;

Array.prototype.customIncludes = function(num){
   for(let i = 0; i < this.length; i++){
      const el = this[i];
      if(num === el){
         return true;
      }
   }
   return false;
};

console.log(arr.customIncludes(num));

출력 결과

true

코드 설명

이 코드가 동작하는 원리를 단계별로 살펴보겠습니다.

1. 프로토타입 확장: Array.prototype에 customIncludes라는 새로운 메서드를 추가함으로써, 모든 배열 인스턴스에서 이 함수를 호출할 수 있게 됩니다.
2. this 활용: 메서드 내부의 this는 해당 메서드를 호출한 배열 자신을 가리킵니다. 따라서 this.length와 this[i]를 통해 배열을 순회할 수 있습니다.
3. 엄격한 동등 비교: === 연산자를 사용하여 타입 변환 없이 값과 타입이 모두 일치하는 경우에만 true를 반환합니다. 이는 내장 includes()의 동작 방식과도 유사합니다.
4. 조기 반환(Early Return): 일치하는 요소를 발견하는 즉시 true를 반환하므로, 불필요한 반복을 줄여 성능 면에서도 효율적입니다.
5. 기본 반환값: 루프가 끝날 때까지 일치하는 요소가 없다면 최종적으로 false를 반환합니다.

마무리

이처럼 간단한 반복문과 엄격한 동등 비교만으로도 내장 includes() 메서드와 유사하게 동작하는 커스텀 함수를 손쉽게 구현할 수 있습니다. 프로토타입 확장은 강력한 기능이지만, 실무 환경에서는 기존 메서드와의 충돌 가능성을 고려하여 신중하게 사용하는 것이 좋습니다.