filter() 메소드는 제공된 함수로 구현된 테스트를 통과하는 모든 요소가 있는 새로운 배열을 만듭니다.

구문

var new_array = arr.filter(callback[, thisArg])

매개변수

callback
배열의 각 요소를 테스트하는 함수. 인수 (element, index, array) 와 함께 호출됨. 요소를 (새 배열에) 계속 두기 위해 true를 반환, 그렇지 않으면 false.
thisArg
선택 사항. callback을 실행할 때 this로 사용하는 값.

반환값

테스트를 통과한 요소가 있는 새로운 배열.

설명

filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callbacktrue로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다; 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다. callback 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다.

callback은 다음 세 인수와 함께 호출됩니다:

  1. 요소값
  2. 요소 인덱스
  3. 순회(traverse)되는 배열 객체

thisArg 매개변수가 filter에 제공된 경우, 호출될 때 callback에 전달됩니다, this 값으로 쓰기 위해. 그렇지 않으면, undefined값이 this 값으로 쓰기 위해 전달됩니다. 결국 callback에 의해 관찰할 수 있는 this 값은 함수에 의해 보이는 this를 결정하는 평소 규칙에 따라 결정됩니다.

filter()는 호출되는 배열을 변화시키지(mutate) 않습니다.

filter()에 의해 처리되는 요소의 범위는 callback의 첫 호출 전에 설정됩니다. filter() 호출 시작 이후로 배열에 추가된 요소는 callback에 의해 방문되지 않습니다. 배열의 기존 요소가 변경 또는 삭제된 경우, callback에 전달된 그 값은 filter()가 그 요소를 방문한 시점에 값이 됩니다; 삭제된 요소는 반영되지 않습니다.

모든 작은 값 걸러내기

다음 예는 값이 10 이하인 모든 요소가 제거된 걸러진 배열을 만들기 위해 filter()를 사용합니다.

function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

JSON에서 무효한 항목 거르기

다음 예는 0이 아닌, 숫자 id인 모든 요소의 걸러진 json을 만들기 위해 filter()를 사용합니다.

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function filterByID(obj) {
  if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
    return true;
  } else {
    invalidEntries++;
    return false;
  }
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries);
// Number of Invalid Entries = 4

폴리필

filter()는 ECMA-262 표준 제5판에 추가되었습니다; 그러하기에 모든 표준 구현에 없을 수 있습니다. 스크립트 시작 부분에 다음 코드를 삽입하여 이를 우회할 수 있습니다, 원래 이를 지원하지 않는 ECMA-262 구현에서 filter()를 사용할 수 있는. 이 알고리즘은 바로 ECMA-262 제5판에서 서술한 겁니다, fn.callFunction.prototype.call()의 원래값으로 평가하고 Array.prototype.push()가 그 원래값을 갖는 것으로 여기는.

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun/*, thisArg*/) {
    'use strict';

    if (this === void 0 || this === null) {
      throw new TypeError();
    }

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
      throw new TypeError();
    }

    var res = [];
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t) {
        var val = t[i];

        // 주의: 기술상 이는 아마 다음 인덱스에서
        //       Object.defineProperty일 것임, push는 Object.prototype
        //       및 Array.prototype 상 속성에 의해 영향을 받을 수 있기에.
        //       그러나 그 메소드는 새롭고 충돌은
        //       드물기에 더 호환되는 대안을 쓰세요.
        if (fun.call(thisArg, val, i, t)) {
          res.push(val);
        }
      }
    }

    return res;
  };
}

스펙

스펙 상태 설명
ECMAScript 5.1 (ECMA-262)
The definition of 'Array.prototype.filter' in that specification.
Standard 초기 정의. JavaScript 1.6에서 구현됨.
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.prototype.filter' in that specification.
Standard  
ECMAScript Latest Draft (ECMA-262)
The definition of 'Array.prototype.filter' in that specification.
Draft  

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.5 (1.8) 9 (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 1.0 (1.8) (Yes) (Yes) (Yes)

참조

문서 태그 및 공헌자

이 페이지의 공헌자: Saem, Netaras, rageboom, Yunhong-Min, keypointer
최종 변경: Saem,