map vs filter

map과 filter 모두 javascript를 사용하는 사람이라면 무수히 많이 봤을 메서드이다. 둘의 형태는 매우 흡사하게 생겼으며, 콜백함수의 인자도 비슷하다. 그렇다면 둘의 차이가 정확하게 무엇일까 답은 각 함수의 리턴하는 기능이라 할 수 있다.

1. map()

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

즉 담긴 인자들을 return 즉 반환값에 의해 새로운 배열로 만들어 생성 한다는 것이다.

2. filter()

순회하는 값들에 대해 반환값을 true로 반환시 유지, false로 반환 시 버리는 것이다.

즉 담긴 인자들이 return 즉 반환값이 true면 유지, false면 버리게 되는 것이다

근본적인 차이가 위의 둘인데, 이 둘을 조금 더 쉽게 이해하려면 예시 몇가지면 충분할 것이다.

예시

만약 [1,2,3,4,5] 라는 배열이 있을 때, 여기서 2보다 큰 값들로만 배열을 얻으려고 한다

let test = [1,2,3,4,5]

test.map((e) => {
	return e > 2
    }
 )
 
 // [false, false, true, true, true]

위와 같은 상황에서 어째서 false, true로 배열이 생성되게 될까? map은 return값을 그대로 반환하기 때문에 각각 순회를 돌면서 단순히 e < 2에 대해서 true, false를 판단해 그 값을 반환해 새로운 배열로 생성되는 것이다.

하지만 이에 비해 filter는?

let test = [1,2,3,4,5]

test.filter((e) => {
	return e > 2
    }
 )
 
 // [3,4,5]

위처럼 반환 될 것이다. filter는 return에 있는 조건식에 true인 것들만 반환하기 때문에 위 처럼 나올 것이다. 대충 이해가 갔는가? 그렇다면 map을 이용해 2보다 큰 숫자를 반환 하려면 어떻게 해야할까?

let test = [1,2,3,4,5]

test.map((e) => {
    if (e > 2) {
        return e
    }
})
 
 // [undefined, undefined, 3,4,5]

위 처럼 if문으로 해당 값만 반환하게 하는 것으로 해주어야 할 것이다. 하지만 해당 함수를 실행하면 undefined가 나오게 된다. 따라서 여기에 한 번더 filter를 씌워서 true인 값만 반환하게 해야할 것이다.

let test = [1,2,3,4,5]

test.map((e) => {
    if (e > 2) {
        return e
    }
}).filter((e) => e)
 
 // [3,4,5]

위 둘의 차이점을 잘 이해하고 map과 filter를 쓰도록 하자