이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

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

문법(Syntax)

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

매개변수

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

반환 값

callback의 테스트를 통과한 요소로 이루어진 새로운 배열. 만약 모든 배열 요소가 테스트를 통과하지 못하면 빈 배열([]) 리턴.

설명

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 isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

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

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

 

배열 내용 검색

다음 예는 배열 내용을 조건에 따라 검색하기 위해  filter() 를 사용합니다.

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

ES2015로 구현

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

폴리필(Polyfill)

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  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic supportChrome Full support YesEdge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support Yes

Legend

Full support  
Full support

같이 보기

문서 태그 및 공헌자

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