JavaScript - map과 filter 차이

📌 자바스크립트 map() / filter 함수

- 두 기능의 가장 큰 차이는 각 함수의 리턴하는 기능이 다르다는 것!!

📚 map()

- callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 리턴값으로 새로운 배열을 생성함

array.map(callback(currentValue[, indx[, array]])[, thisArg])

callback: 새로운 배열 요소를 생성하는 함수. 다음 세가지 인수를 가짐

ⅰ. currentValue: 처리할 현재 요소
ii. index(Optional): 처리할 현재 요소의 인덱스
iii. array(Optional): map()를 호출한 배열
iv. thisArg(Optional): callback을 실행할 때 this로 사용할 값

📚 filter()

- 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

array.filter(callback(element[, index[, array]])[, thisArg])

callback: 각 요소를 시험할 함수. ture를 반환하면 요소를 유지하고, false를 반환하면 버림

ⅰ. currentValue: 처리할 현재 요소
ii. index(Optional): 처리할 현재 요소의 인덱스
iii. array(Optional): filter()를 호출한 배열
iv. thisArg(Optional): callback을 실행할 때 this로 사용할 값

📕. map() vs filter() 차이점

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

console.log(arr.filter((item) => item <= 3)) // [0, 1, 2, 3]
console.log(arr.map((item) => item <= 3))  // [true, true, true, true, false, false, false]


arr.map((item) => {
    if(item <= 3){
        return item
    }
}) // [0, 1, 2, 3, undefined, undefined, undefined]

❓ filter와 map은 동일한 코드임에 불구하고 결과값이 차이 나는 이유는?

- 콜백함수의 역할이 다르기 때문
- map의 콜백함수는 산술된 인자를 받아 배열을 만드는 역할을 함
   => item <= 3을 받으면 그 산술 결과인 불리언값을 리턴해 배열을 만들어줌
- filter의 콜백 함수는 리턴값이 불리언이 true인 값만 가지고 배열을 만드는 역할을 함
  => item <= 3에서 item값에 따라 조건식이 true이면, item 을 그대로 저장함
- 빈값을 제거 하기 위해선 filter를 써야함

참조
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-map-%EA%B3%BC-filter