map 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. map과 filter의 가장 큰 차이점은 filter에 반해 map은 모든 요소를 입력받은 콜백함수에 적용하여 리턴한다는 점이다. filter는 말 그대로 조건에 맞는 요소를 걸러주는 역할을 하는 반면, map은 'mapping' 한다 하여, 모든 요소를 함수 적용값으로 덮어씌우기 한다. 따라서 filter는 입력받은 배열과 리턴받은 배열의 길이가 다를 수 있지만, map은 배열의 길이에 영향을 주지 않는다.
map 메소드도 기능 구현의 이해를 돕는 문제 하나로 알고리즘을 분석해보자.
문제: 함수와 배열을 입력받아 배열의 각 요소에 함수가 적용된 새로운 배열을 리턴해야 합니다.
입력:
인자1 func: number 타입을 입력받아 number 타입을 리턴하는 함수
인자2 arr: number 타입을 요소로 갖는 배열, arr[i]는 0 이상의 정수
출력: 배열을 리턴
우선 filter와 마찬가지로 요소들에 콜백함수를 적용한 값을 리턴해줄 새로운 배열을 선언한다.
function mapCallback(func, arr) {
const newArr = [];
}
그 다음은 filter와 유사하게 반복문으로 배열의 모든 요소를 순회하면서 요소 하나하나에 콜백함수를 적용시킨 값을 새 배열에 담아주는 작업을 한다.
function mapCallback(func, arr) {
const newArr = [];
for(let i = 0; i < arr.length; i++) {
newArr.push(func(arr[i]);
}
return newArr;
}
filter와 다른 점은, filter는 조건문으로 true 값을 리턴하는 요소들만 걸러서 새 배열에 담아줬지만 map은 조건없이 모든 요소를 새 배열에 담아준다는 것이다.
map은 filter와 알고리즘은 매우 유사하지만 조금의 차이로 완전히 다른 기능을 실행한다. map과 filter 메소드의 차이를 명확히 알고 적재적소에 사용할 수 있어야 한다.