Array.prototype.filter()

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

구문

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

매개변수

callback

배열의 각 요소를 테스트하는 함수. 인수 (element, index, array) 와 함께 호출됨. 요소를 (새 배열에) 계속 두기 위해 true를 반환, 그렇지 않으면 false.

thisArg

선택 사항. callback을 실행할 때 this로 사용하는 값.

반환값

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

설명

filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. 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.call은 Function.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;
  };
}

스펙

브라우저 호환성

참조

• Array.prototype.forEach()
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.reduce()