filter 매서드 이해하기

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter() 메서드를 사용하면 filter() 메서드의 조건에 맞는 요소로 이루어진 새로운 배열을 반환합니다.

어떤 요소도 조건을 만족하지 못했다면 빈 배열을 반환합니다.

 

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

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

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

 

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// 결과: Array ["exuberant", "destruction", "present"]

위의 코드는 배열에 들어있는 단어 중 길이가 6글자보다 긴 문자열을 반환하기 위해 filter() 메서드를 이용하여 값을 추출하였습니다.

 

const number = [1,2,3,4,5,6]
const withoutNumber = number.filter(number => number !== 3)

// 결과 : [1,2,4,5,6]

특정값을 제외한 값의 반환을 원할 경우에도 사용이 가능합니다.

 

함수 형태로 사용

function isBigEnough(value) {
  return value >= 10;
}

let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

검색 조건에 따른 배열 필터링

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