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

...

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

둘은 매우 비슷하게 생겼다. 콜백함수의 인자도 거의 똑같고 생김새도 완전 판박이라 할수 있다. 다만 각 함수의 리턴하는 기능이 다르다고 볼수 있다.

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를 받으면 그 산술 결과인 불리언값을 리턴해 배열을 만드는 것이다.

filter의 콜백 함수는 리턴값의 불리언이 true인 값만 가지고 배열을 만드는 역할은 한다.

그래서 c <= 2에서 c값에 따라 저 조건식이 true면, c를 그대로 저장하는 것이다.

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

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

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은 fasle.

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