Array.filter() - 배열에서 항목 필터링

배열 방식 시리즈의 두 번째 글에서는 필터 방식이 무엇이고 어떻게 작동하는지 설명하겠습니다.

필터 방법이란 무엇입니까?

배열의 필터 메서드는 배열의 각 항목을 반복하고 조건에 대해 항목을 테스트하고 조건을 통과하는 경우에만 해당 항목을 반환하는 고차 함수입니다. 그렇지 않으면 결과 배열로 만들지 않습니다. 기본적으로 배열의 항목을 필터링합니다.

고차 함수로서 함수를 인수로 취합니다. 루프 중에 이 함수는 항목(및 배열의 ​​인덱스 위치)을 수신하고 조건에 대해 항목을 테스트합니다. 통과하면 항목이 새 배열로 만들고 그렇지 않으면 그렇지 않습니다.

필터 메서드의 반환된 출력은 조건을 통과한 항목을 포함하는 새 배열입니다.

Filter 메서드의 구문

someArray.filter(function(item, index, array) {
  // condition to test value with
  // return true or false
})

item 인수는 반복되는 항목입니다.

index 인수는 배열에서 항목의 위치입니다. 예를 들어 첫 번째 항목의 인덱스는 0이고 두 번째 항목의 인덱스는 1입니다.

배열 인수는 배열 자체입니다.

필터 방법 없이

필터 메서드는 문자 그대로 "배열을 살펴보고 배열에서 일부를 선택"하는 선언적 추상 함수입니다. 다음은 이 방법 없이 배열을 필터링하는 방법을 보여주는 예입니다.

const array = [...]

const newArray = []

for(let i = 0, i < array.length, i++) {
  const item = array[i]
  // a condition
  const isGreaterThan10 = item > 10

  if(isGreaterThan10) {
    newArray.push(newItem)
  }
}

이 루프 방식은 필터 방식이 백그라운드에서 수행하는 것과 유사합니다. 각 항목을 반복하고 항목이 조건을 통과하면(이 경우 항목은 10보다 큰 숫자여야 함) 새 배열로 푸시됩니다.

Filter 메서드의 한 가지 사용 사례

필터 방법의 많은 사용 사례가 있습니다. 조건에 따라 배열에서 일부 항목을 필터링하려는 경우 이것이 goto 방법입니다.

하지만 한 가지 사용 사례를 살펴보겠습니다.

특정 연령의 사람들을 걸러내기 위해

age 속성을 가진 people 개체의 배열이 있다고 가정해 보겠습니다. 예를 들어 30세 이상의 사람들을 필터링하려고 합니다. 이에 대한 코드는 다음과 같습니다.

const people = [
  {
    name: "Joe",
    nation: "U.S.A",
    age: 31
  },
  {
    name: "Jane",
    nation: "U.S.A",
    age: 29
  },
  {
    name: "John",
    nation: "Netherlands",
    age: 35
  },
  {
    name: "Perez",
    nation: "Paris",
    age: 23
  },
  {
    name: "Mike",
    nation: "Nigeria",
    age: 30
  },
]

const peopleOlderThan30 = people.filter(person => {
  const isOlder = person.age > 30
  return isOlder
})

console.log(peopleOlderThan30)
// [
//  { name: 'Joe', nation: 'U.S.A', age: 31 },
//  { name: 'John', nation: 'Netherlands', age: 35 }
// ]

여기서 조건은 person.age > 50 입니다. 이 조건을 통과하는 개체만 이 배열로 반환됩니다. 예에서는 31세의 Joe와 35세의 John이 있습니다.