[JS] 고차 함수 이해하기 (1, map과 filter)

유레카 활동을 통해 알게된 LG U+ 멘토님의 추천에 따라 자바스크립트 코딩 테스트 준비를 위한 인프런 강의를 하나 듣기 시작했다. 코테도 코테지만, 역시나 👍 아니나 다를까 🤩 또 😇 벌써 🤮 그 사이에 JS의 기본 문법을 까먹고 있었음을 깨닫고 복습 겸 정리해보는 시간을 가진다.

프로그래밍 관점에서의 고차 함수란?

1) 다른 함수를 인자로 받는 함수
2) 다른 함수를 반환하는 함수

map과 filter의 차이점이 뭐게?

둘 다 새로운 배열을 만드는 함수이지만 기존 배열과 새롭게 생성된 배열의 길이가 항상 같은지, 아닌지의 차이!

왜 다르지?

ChatGPT에게 물어보면 이렇게 친절하게도 답해주지만, 책을 덜 읽는 편이라 그런지 잘 와닿지 않았다.

대신, 아래와 같은 예제 코드 통해 각 메서드의 흐름과 차이점을 명확하게 이해할 수 있었다.

( 동작 예시 1 ) map의 경우

arr = [10, 11, 12, 13, 14, 15]

function map(predicate, thisArg){
	let list = [];
    for(let i=0; i<arr.length; i++){
    	list.push(predicate(arr[i], i));
    }
    return list;
}

let answer = arr.map(function(v,i){
	if(v%2===0) return v;
}, [1, 2]);

answer를 콘솔로 찍어보면, [10, undefined, 12, undefined, 14, undefined] 가 나오게 된다. 기존 배열의 길이만큼 새로운 배열에 push를 진행했고, 조건을 만족하지 않는다면 아무 값도 반환하지 않기 때문에 undefined로 채워지는 것이 당연했다. 그래서 기존 배열과 새롭게 생성된 배열의 길이가 항상 같을 수밖에 없는 것이다.

( 동작 예시 2 ) filter의 경우

arr = [10, 11, 12, 13, 14, 15]

function filter(predicate, thisArg){
	let list = [];
    for(let i=0; i<arr.length; i++){
    	if(predicate(arr[i], i)) list.push(arr[i]);
    }
    return list;
}

let answer = arr.filter(function(v,i){
	return v%2===0;
}, [1, 2]);

반면, filter의 경우는 answer가 [10, 12, 14] 를 가진다. 왜냐? 조건 자체를 return 함으로써 해당 조건에 맞는 경우에만 새로운 배열에 push 하므로 기존 배열 조건과 return 하는 조건이 같지 않다면 새로운 배열의 길이가 기존 배열과 다를 수 밖에!

(참고로 위 예제 코드 중 thisArg는 콜백 함수 내에서 this가 가리킬 객체를 지정하는 옵션 인자인데, 이는 이후에 사용 예시와 함께 좀 더 구체적으로 공부해보도록 해야겠다.)