[JS] map과 filter의 차이점

map

arr.map(callback(currentValue[, index[, array]])[, thisArg])Copy

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

map()은 배열의 각 요소에 대해 지정된 함수를 호출하고, 반환된 값을 사용하여 새로운 배열을 생성한다.
따라서 map()을 사용하면 기존 배열과 길이가 같은 새로운 배열을 생성하며, 이 새로운 배열의 각 요소는 기존 배열의 각 요소를 변환한 값이 된다.

const arr = [1, 2, 3, 4];
const mappedArr = arr.map(item => item * 2);
console.log(mappedArr); // [2, 4, 6, 8]

---

filter

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

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

filter()는 배열에서 특정 조건을 충족하는 요소만 추출하여 새로운 배열을 생성한다.
따라서 filter()를 사용하면 새로운 배열의 길이는 기존 배열의 길이보다 작거나 같을 수 있다.

const arr = [1, 2, 3, 4];
const filteredArr = arr.filter(item => item % 2 === 0);
console.log(filteredArr); // [2, 4]

---

한눈에 이해하는 map() vs filter() 차이점

이 둘의 차이를 퀴즈를 통해 알아보자.

Q. [0,1,2,3,4,5] 배열이 있고 이중에서 2보다 작은 인자값만 구성된 배열을 얻어라

let testArray = [0,1,2,3,4,5];

testArray.filter(function(c){ return c <= 2; }); // [0, 1, 2]

testArray.map(function(c){ return c <= 2 }); // [true, true, true, false, false, false]

testArray.map(function(c){
    if (c <= 2)
        return c;
}) // [0, 1, 2, undefined, undefined, undefined] 빈값을 제거하기위해선 아이러니하게도 filter을 써야한다.Copy

왜 filter와 map은 똑같은 코드임에 불구하고 결과값이 차이가 나는걸까?

그것은 콜백함수의 역할이 다르기 때문이다.

• map의 콜백함수는 산술된 인자를 받아 배열을 만드는 역할을 한다.
  그래서 c <= 2를 받으면 그 산술 결과인 불리언값을 리턴해 배열을 만드는 것이다.
• filter의 콜백 함수는 리턴값의 불리언이 true인 값만 가지고 배열을 만드는 역할은 한다.
  그래서 c <= 2에서 c값에 따라 저 조건식이 true면, c를 그대로 저장하는 것이다.

​이번엔 반대의 경우를 보자. 논리 연산이 아닌 산술 연산을 리턴값으로 주면 어떻게 될까?

Q. [0,1,2,3,4,5] 배열이 있고 인자값을 두배 늘린값으로 이루어진 배열을 얻어라

let testArray = [0,1,2,3,4,5];

testArray.filter(function(c){ return c * 2; }); // [1, 2, 3, 4, 5]

testArray.map(function(c){ return c * 2 }); // [0, 2, 4, 6, 8, 10]Copy

map은 산술된 값을 리턴, 즉 c * 2를 산술해서 배열에 넣어 만드니까 원하는 답을 얻을수 있다.

하지만, filter은 c * 2를 산술이 아닌 논리로 본다. c * 2는 뭘해도 참이다.

딱 한가지만 제외하고 말이다. 바로 c에 0값이 들어가면 0이 되니까, 0은 fasle.

그래서 위 filter()의 결과 배열에 '0' 원소가 빠져있는 이유다.

https://juejin.cn/post/7114604944900128804

---

마무리

• map()는 기존 배열의 각 요소를 변환하여 새로운 배열을 생성한다.
• filter()는 기존 배열에서 특정 조건을 충족하는 요소만 추출하여 새로운 배열을 생성한다.

---

Reference

Array.prototype.map() - JavaScript | MDN

Array.prototype.filter() - JavaScript | MDN

[JS] 📚 자바스크립트 map 과 filter 차이