고차 함수에 대해서 아시나요?
✅ 고차 함수(Higher-Order Function)란?
고차 함수란
함수를 매개변수(인자)로 받거나, 함수를 리턴하는 함수이다.
수학에서 1차함수는 y = 2x+1 이런게 1차함수였는데 일반적으로 값을 받아서 처리하는 함수가 1차 2차 등 n차 함수이다.
하지만 이보다 더 한차원 위인, 함수를 값으로 받아서 처리하는 함수인 뜻에서 '고차 함수'라고 한다.
자바스크립트에서는 함수도 일종의 값(value)이기 때문에,
함수를 숫자나 문자열처럼 변수에 담을 수 있고, 다른 함수에 넘길 수도 있고, 함수에서 다른 함수를 반환하는 것도 가능하다.
💡 예시로 이해해보자
함수를 인자로 받는 고차함수
function repeat(n, action) {
for (let i = 0; i < n; i++) {
action(i);
}
}
repeat(3, console.log); // 0, 1, 2 출력repeat에서 두 번째 인자인action에서 함수인console.log를 받는다.
이렇게 함수를 인자로 받는 함수를 고차 함수라고 한다
함수를 반환하는고차함수
function multiplier(factor) {
return function (number) {
return number * factor;
};
}
const double = multiplier(2);
// const double = function(number){
// return number * 2
console.log(double(5)); // 10multiplier(2)는 함수를 반환하고,- 그 결과인
double도 함수다. - 이처럼 함수를 반환하는 것도 고차 함수다.
고차 함수에서 나오는 용어들
- 매개변수(parameter)
: 함수에 전달되는 입력값을 받을 자리
function greet(name) {
console.log("Hello, " + name);
}
greet("MJ"); // name에 "MJ"이 들어감- 여기서 함수 옆 괄호 속 name이 매개변수
- 함수를 호출 할 때 greet("MJ")에서 "MJ"은 매개변수가 아니라 인자(argument)라고 한다.
- 콜백함수
: 다른 함수에 "인자로 전달되어", 내부에서 실행되는 함수
//함수 선언 부분
function sayHello(name, callback) {
const words = '안녕하세요 내 이름은 ' + name + ' 입니다.';
callback(words); // 매개변수의 함수(콜백 함수) 호출
}
//함수 호출 부분
sayHello("MJ", function printing(name) { // 보통 이름을 지우고 익명함수로 쓴다.
console.log(name); // 안녕하세요 내 이름은 MJ 입니다.
});여기서 printing 이라는 이름의 함수가 콜백함수이다.
자주 쓰는 고차 함수 메서드들
자바스크립트 배열 메서드 중에서
고차 함수로 작동하는 대표적인 애들은 아래와 같다:
🔸 map()
- 배열의 각 요소에 함수를 적용하고, 새로운 배열을 반환
[1, 2, 3].map(x => x * 2); // [2, 4, 6]🔸 filter()
- 조건에 맞는 요소만 걸러서 새로운 배열을 반환
[1, 2, 3, 4].filter(x => x % 2 === 0); // [2, 4]🔸 reduce()
- 배열을 하나의 값으로 줄이기 (누적 계산)
[1, 2, 3].reduce((acc, cur) => acc + cur, 0); // 6🔸 forEach()
- 각 요소에 대해 함수를 실행하지만, 새 배열을 반환하지 않음
[1, 2, 3].forEach(x => console.log(x)); // 1,2,3 출력forEach vs map
둘 다 배열을 순회하면서 요소요소마다 함수를 실행시켜주는 메소드이다.
그러나 차이점은 반환을 해주냐, 안해주냐 이다. 예시코드를 보며 이해하자.
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
arr1.forEach(x => {
console.log(x * 2); // 2, 4, 6 출력
});
arr2.map(x => {
console.log(x * 2);
});
const result1 = arr1.forEach(x => x * 2);
const result2 = arr2.map(x => x * 2);
console.log(result1); // undefined!
console.log(result2); // [2, 4, 6]고차 함수를 쓴다면?
- ✅ 코드가 간결해짐
- ✅ 반복 작업을 줄여주고, 재사용성이 높아짐
- ✅ 함수를 조합하거나 추상화하기가 쉬워짐
리스트에서 짝수만 뽑아 두 배를 하고 싶다면?
const arr = [1, 2, 3, 4, 5];
const evenDoubled = arr
.filter(x => x % 2 === 0)
.map(x => x * 2);
console.log(evenDoubled); // [4, 8]이런식으로 함수를 체이닝하여 연산시킬 수 있다.
✨ 마무리 정리
- 고차 함수는 "함수를 다루는 함수"
- 함수를 인자로 받거나, 반환하면 고차 함수임
map,filter,reduce,forEach전부 고차 함수임- 자바스크립트에서 함수는 값이다 → 그래서 고차 함수가 가능하다
Frontend Engineers