[자바스크립트/JavaScript] 고차 함수 filter 사용 방법 #2

☘️ 시작하며...

첫 번째 게시물로 자바스크립트 고차함수인 map에 대해 알아보았다.

[자바스크립트/JavaScript] 고차 함수 map 사용 방법 #1

 

이번 게시물은 filter에 대해 알아볼 것이다.

 

---

 

☘️ Array.filter()

filter는 무슨 역할을 할까?

filter
배열을 for와 같이 돌면서, true에 해당하는 요소로 구성된 새로운 배열을 생성하여 반환

 

사용 예시

배열 numArr가 있을 때, 홀수로 된 배열을 반환받고 싶으면 아래처럼 코드를 작성한다.

 

filter의 첫 번째 인자인 item은 배열의 각 요소이다. (인자 이름은 사용자가 원하는 대로 작성할 수 있다.)

그래서 각 요소인 item에 2로 나눈 나머지가 1이면 반환한다.

const numArr = [1, 2, 3, 4, 5];

const newArr = numArr.filter((item) => {
  console.log(item);
  return item % 2 === 1; // 2로 나눈 나머지가 2 = 홀수
});

console.log(newArr);

그러면 각 요소가 for처럼 배열이 도는 것을 확인할 수 있고, 홀수로만 이루어진 배열을 결과로 반환받는 것도 알 수 있다.

출력 결과

 

간단하게 한 줄로 표현할 수도 있다.

const newArr = numArr.filter((item) => item % 2 === 1);

 

filter의 파라미터(인자)

filter의 첫 번째 인자는 배열의 요소인 것을 위에서 확인할 수 있다. 그 이외에는 아래 사진에서 참고할 수 있다.

filter의 파라미터를 출력하면 아래와 같은 결과를 얻을 수 있다.

출력 결과

 

☘️ filter 활용 하기

객체 배열 반환

배열 안에 있는 객체들도 사용자가 원하는 내용만 가져와 배열을 만들 수 있다.

 

lastName이 Kim이고, grade가 2 이상인 것만 반환하고 싶은 경우 아래 코드처럼 작성한다.

const student = [
  { lastName: 'Lee', grade: 1 },
  { lastName: 'Kim', grade: 3 },
  { lastName: 'kim', grade: 2 },
  { lastName: 'Lee', grade: 1 },
  { lastName: 'Lee', grade: 2 },
  { lastName: 'Kim', grade: 2 },
];

const newArr = student.filter((item) => {
  if (item.lastName === 'Kim' && item.grade >= 2) return true;
});

출력 결과

 

구조 분해

첫 번째 인자를 배열 형태로 [n1, n2, n3] 이렇게 구조 분해를 사용하여 각 배열의 요소의 값을 원하는 데로 할 수 있다.

const arr = [
  ['banana', 4, true],
  ['apple', 2, false],
  ['orange', 3, true],
];

const newArr = arr.filter(([n1, n2, n3]) => {
  if (n1.length > 5 && n2 % 2 === 0 && n3 === true) return true;
});

출력 결과

 

중복 제거

filter를 사용하여 중복제거를 할 수 있다.

 

indexOf는 해당 값이 있는 첫 번째 index를 반환하여,

만약 중복된 값이라면 index가 해당 값의 첫번째 index와 달라, 중복된 요소는 제거된 상태로 배열이 반환된다.

const numArr = [1, 1, 1, 2, 3, 4, 5, 5, 6];

const newArr = numArr.filter((num, idx, arr) => {
  return arr.indexOf(num) === idx;
});

출력 결과

 

---

☘️ 마무리 하며...

filter에 대해 알아보았다.

원하는 값만 배열로 만들어 반환해주어 새로운 배열을 만들어 값을 넣어야 할 번거로움이 줄어들었다.

map을 알고 나니 filter가 좀 쉬워진 것 같다!