자바스크립트 filter() 메소드 설명

filter() 메소드는 특정 함수를 통과하는 값을 새로운 배열로 만들어 줍니다. 이를 통해 배열 요소 중 특정한 기준을 만족하는 요소들을 포함하는 새로운 배열을 생성할 수 있습니다.

const words = ['cool', 'happiness', 'voice', 'chocolate', 'sleepy']

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

console.log(result); // [happiness, chocolate]

다음은 MDN에서 제공하는 filter() 메소드 사용 예시입니다.

1. 10보다 큰 숫자 찾기

function isBig(value) {
    return value >= 10
}

let filtered = [12, 5, 1, 120, 44].filter(isBig);

// [12, 120, 44]

2. 소수(prime number) 찾기

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i == 0) {
      return false;
    }
  }
  return num > 1;
}

console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

3. JSON에서 유효하지 않은 값 필터링하기

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

let invalidEntries = 0

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

let 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

4. 배열 필터링 하기

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']

/**
 * Filter array items based on search criteria (query)
 */
function filterItems(arr, query) {
  return arr.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) !== -1
  })
}

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

 

참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter