JavaScript filter() 메소드의 역할과 사용법 총정리

JavaScript filter() 메소드란?

JavaScript의 filter() 메소드는 배열에서 제공된 함수로 구현한 테스트를 통과하는 모든 요소를 모아 새로운 배열을 생성합니다. 원본 배열은 변경되지 않으며, 조건에 맞는 요소만 걸러내어 새 배열로 반환한다는 점이 핵심입니다.

예를 들어 숫자 배열에서 10 이상인 값만 추출하거나, 객체 배열에서 특정 조건을 만족하는 항목만 골라낼 때 유용하게 사용됩니다.

filter() 메소드의 매개변수

callback − 배열의 각 요소를 테스트할 함수입니다. 이 함수가 true를 반환하는 요소만 새 배열에 포함됩니다.
thisObject − callback을 실행할 때 내부에서 this로 사용할 객체입니다. (선택 사항)

filter() 메소드 사용 예제

아래 코드를 실행하면 JavaScript에서 filter() 메소드가 어떻게 동작하는지 직접 확인할 수 있습니다. 이 예제는 구형 브라우저 환경을 고려해 filter가 없을 경우 폴리필(polyfill)로 직접 구현한 후, 10 이상의 값만 필터링하는 방식을 보여줍니다.

<html>
   <head>
      <title>JavaScript Array filter Method</title>
   </head>
   
   <body>
      <script>
         if (!Array.prototype.filter) {
            Array.prototype.filter = function(fun /*, thisp*/) {
               var len = this.length;

               if (typeof fun != "function")
               throw new TypeError();

               var res = new Array();
               var thisp = arguments[1];

               for (var i = 0; i < len; i++) {
                  if (i in this) {
                  var val = this[i]; // fun이 this를 변경하는 경우 대비
                  if (fun.call(thisp, val, i, this))
                  res.push(val);
                  }
               }
               return res;
            };
         }
         function isBigEnough(element, index, array) {
            return (element >= 10);
         }

         var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
         document.write("Filtered Value : " + filtered );
      </script>
   </body>
   
</html>

실행 결과

위 예제에서 [12, 5, 8, 130, 44] 배열에 isBigEnough 함수를 적용하면, 10보다 크거나 같은 요소만 통과하므로 다음과 같은 결과가 출력됩니다.

Filtered Value : 12,130,44

정리

filter() 메소드는 조건을 만족하는 요소만 추출해 새 배열을 만들어주는 강력한 배열 메소드입니다. 콜백 함수의 반환값이 참(true)인 요소만 결과에 포함되며, 원본 배열은 그대로 유지됩니다. 데이터 검색, 목록 필터링, 유효성 검사 등 다양한 상황에서 활용도가 매우 높으므로 꼭 익혀두시기 바랍니다.