[Javascript] map()과 filter()의 차이 이해하기

 

 

 

map()과 filter(). 둘은 매우 비슷하게 생겼다. 콜백 함수의 인자도 거의 똑같고 생김새까지도. 다만 각 함수는 return하는 기능이 다르다고 할 수 있다.

 

 

map()

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

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

 

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

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

 

---

 

 

filter()

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

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

 

callback은 각 요소를 시험할 함수로 true를 반환하면 요소를 유지하고 false를 반환하면 버리며 다음의 세 가지 인수를 갖는다.

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

 

---

 

 

map() vs filter()

 

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

 

 

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

var 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을 써야 함

 

 

왜 같은 코드임에도 filter와 map은 결과 값에 차이가 나는 걸까?

 

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

 

map()의 콜백 함수는 산술된 인자를 받아 배열을 만드는 역할을 한다. 따라서 c <= 2를 받으면 그 산술 결과인 boolean 값을 반환해 배열을 만드는 것이다.

 

반면 filter()의 콜백 함수는 리턴 값의 boolean이 true인 값만 가지고 배열을 만드는 역할을 한다. 따라서 c <= 2에서 c 값에 따라 저 조건식이 true면 c를 그대로 저장하는 것이다.

 

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

 

 

 

 

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

 

var 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]

 

map은 산술된 값을 반환, 즉 c * 2를 산술하여 배열에 넣으므로 원하는 답을 얻을 수 있다.

 

하지만 filter()의 경우 c * 2를 산술이 아닌 논리로 본다. c * 2는 뭘 해도 참이다.

 

딱 한 가지만 제외하고 말이다. c의 값으로 0이 들어가면 0이 되니까 0은 false. 이는 위 filter()의 결과 배열에 '0' 원소가 빠져 있는 이유이다.