여러 가지 데이터 중에 원하는 데이터만을 뽑아내고 싶다면? 🤔
이처럼 어떤 데이터 집합에서 특정 조건을 만족하는 값만 반환받기를 원할 때 filter 메서드를 사용한다.

✍️ filter 란?

자바스크립트에서 filter 는 배열에 사용하며, 주어진 함수를 만족하는 모든 요소를 모아 새 배열로 반환한다.

아래 코드를 통해 filter 가 어떻게 사용되는지 간단히 알아보자.

let array = [3,5,11,0,9,'string'];
let result = array.filter((value) => value < 10)
console.log(result);

//output : array [3, 5, 0, 9]

위의 코드를 보면, array라는 배열이 있다. 이 배열에서 10미만의 값만 추출하려고 한다.
이를 위해 우선 결과값들을 담아둘 result 변수를 만들었다. 그 후 기존 배열에 .filter()를 붙이고 괄호 안에는 필터조건이 되는 함수를 넣어 주었다.

🔨 filter 사용법

filter 를 쓸 때, 조건식을 filter()의 괄호 안에 쓰는 방법이 있고 filter외부에 사용하는 방법이 있다.

함수를 filter 내에 주기

위 사진의 #1 solution을 보면, filter 메서드의 조건식을 괄호 안에 바로 작성해 주었다.
이 방법은 조건식이 간단할 경우 유용하며, 코드 라인을 줄일 수 있고 한 눈에 보기 편한 장점이 있다.

함수를 filter 외부에 사용

위 사진의 #2 solution 을 보면, filter 의 조건을 외부함수로 선언한 후 callback하고 있다.
이 방법은 filter 조건식이 복잡해질 수록 코드 관리에 유용할 것 같다.

🧩 Quiz

filter를 이용해 다음 배열에서 species가 'mammalia'인 새로운 배열을 만들고 콘솔에 출력해 주세요.

let animals = [
  { species: 'mammalia', name: "cat" },
  { species: 'reptiles', name: "lizard" },
  { species: 'amphibia', name: "flog" },
  { species: 'mammalia', name: "dog" },
  { species: 'amphibia', name: "salamander" }
];

위 문제를 풀기 위해서 우선 새로운 배열을 저장할 변수 result를 선언한다.
👉 let result

그 후 animals 배열에 filter 메서드를 사용한다.
👉 let result = animals.filter()

이제 filter에 조건함수를 줄 것이다. 근데 animals 배열의 요소들은 {} 안에 담겨있다. 이런 중괄호 안의 요소를 property라고 하는데, .을 찍어서 접근할 수 있다.
또한 species가 'mammalia'와 일치하는지 검사하기 위해 동등연산자 == 를 사용할 것이다. 그럼 조건식을 아래와 같이 작성할 수 있다.
👉 let result = animals.filter((value) => value.species == 'mammalia')

이를 코드로 작성하면 아래와 같다.

let animals = [
  { species: 'mammalia', name: "cat" },
  { species: 'reptiles', name: "lizard" },
  { species: 'amphibia', name: "flog" },
  { species: 'mammalia', name: "dog" },
  { species: 'amphibia', name: "salamander" }
];

  let result = animals.filter((value) => value.species == 'mammalia')
  

console.log(result);

결과가 아래와 같이 나오면 성공이다.

[
{ species: "mammalia", name: "cat" }, 
{ species: "mammalia", name: "dog" }
]