[javascript] 6. 배열 내장 함수 - filter

아침 7시에 일어나는 습관을 가지려고 조금 일찍 자봤다. 7시는 커녕 7시 14분에 일어나는 기적을 보았다. 아침에 일찍 일어나는 사람들은 정말 대단한듯 하다.

난 쓰레기야....

filter

먼저 이 filter를 사용하고 테스트하기에 앞서 개념을 정리해보았는데 뭔가 map과 비슷하다. 차이점을 좀 더 알아볼 필요가 있을 것 같다.
(하단 참고)

filter는 특정 조건에 만족하는 원소들을 찾아서 그 원소들을 갖고 새로운 배열들을 만드는 작업을 할 수 있게 해준다.
가벼운 예시를 한번 봐보자.

const todos = [
  {
    id: 1,
    text: "자바스크립트 입문",
    done: true
  },
  {
    id: 2,
    text: "함수배우기",
    done: true
  },
  {
    id: 3,
    text: "객체와 배열 배우기",
    done: true
  },
  {
    id: 4,
    text: "배열 내장 함수 배우기",
    done: false
  }
];

// done === false 인 값들만 갖고 새로운 배열을 만드는 예제

const haveDone = todos.filter((todo) => todo.done === false);

console.log(haveDone);
// done이 false 객체를 불러옴
//(1) [Object]
//    0: Object
//      id: 4
//      text: "배열 내장 함수 배우기"
//      done: false

map()과 filter() 공통점과 차이점

javascript 06 배장 내열 함수 map
map() 참고링크

먼저 map()과 filter()의 공통점은 기존 배열을 건드리지 않으면서 새로운 배열을 반환한다는 점이고, 차이점은 map()은 콜백함수가 적용된 새로운 요소를 반환하고 filter()는 조건문을 만족하는 요소들을 반환한다는 점이다.

쉽게 생각하면 filter는 영문을 번역한 것처럼 조건에 맞는걸 걸러낸다는 느낌이 있다.