Javascript Array.prototype.filter()

filter()메서드는 주어진 함수에서 조건에 맞는 요소들을 모아 새로운 배열로 반환한다.

arr.filter(callback(element[,index[,array]])[,thisArg] 이와 같은 구문 으로 사용하면 된다.

매개변수

callback : 각 요소를 시험할 함수이며, true를 반환하면 요소를 유지하고 false를 반환하면 요소를 버린다.

다음 3가지 매개변수를 받는다.

• element : 처리할 현재 요소
• index : 처리할 현재 요소의 인덱스
• array : filter를 호출한 배열

thisArg : callback을 실행할 때 this로 사용하는 값

반환

조건에 맞는 요소로 이루어진 새로운 배열을 반환한다.
어떤 요소도 조건에 부합하지 않으면 빈 배열을 반환한다.

예제

• 짧은 문자열 걸러내기

    const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
  
    const result = words.filter(word => word.length > 6);
  
    console.log(result);
    // Expected output: Array ["exuberant", "destruction", "present"]
  
  

• 모든 작은 값 걸러내기

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

• 배열 내용 검색

    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']
  
  

• 화살표 함수로 구현

    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']
  
  

참고

• MDN-Array.prototype.filter()