고차 함수(Higher-order function)란?
- 함수를 인자로 받아서 사용하거나 결과 값으로 함수를 반환하는 함수이다.
- 함수의 전달인자로 전달되는 함수를 콜백 함수라고 한다.
- JavaScript의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수 있다.
일급 객체란?
- JavaScript에도 특별한 대우를 받는 일급 객체(first-class citizen)가 있는데 함수는 대표적인 일급 객체 중 하나이다.
- JavaScript에서 함수는 아래와 같이 특별하게 취급된다.
1. 변수에 함수를 할당할 수 있다.
// 변수 square에 함수를 할당
const square = function (num) {
return num * num;
};
// 변수 square에는 함수가 할당되어 있으므로 함수 호출 연산자 '()'를 사용할 수 있다.
output = square(5);
console.log(output); // 25 2. 함수를 인자로 전달받을 수 있다.
function double(num) {
return num * 2;
}
// 함수 doubleNum은 고차 함수이며 func는 doubleNum의 콜백 함수이다.
function doubleNum(func, num) {
return func(num);
}
// 함수 double은 함수 doubleNum의 콜백 함수이다.
let output = doubleNum(double, 5);
console.log(output); // 103. 함수를 리턴 값으로 사용할 수 있다.
// 함수 adder는 다른 함수를 리턴하는 고차 함수이며 인자 한 개를 입력받아 익명 함수를 리턴한다.
function adder(added) {
// 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴한다.
return function (num) {
return num + added;
};
}
let output = adder(10)(5); // 15
console.log(output); // 154. 함수는 객체 속성의 값으로 할당될 수 있다.
const cat = {
name: 'nabi',
age: 3,
cry: function(){
console.log('meow...')
}
}콜백 함수(Callback Function)
- 함수의 전달인자로 전달되는 함수를 콜백 함수라고 한다. 어떤 작업이 완료되었을 때 호출하는 경우가 많아서 답신 전화를 뜻하는 콜백 함수라는 이름이 붙여졌다.
- 콜백 함수를 전달받은 고차 함수는 함수 내부에서 이 콜백 함수를 호출할 수 있고 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있다. 아예 호출하지 않을 수도 있고 여러 번 실행할 수도 있다.
// 함수 double은 함수 doubleAdder의 콜백으로 전달된다.
function double(num) {
return num * 2;
}
// 함수 doubleAdder는 고차 함수이며 doubleAdder의 인자 func 함수는 콜백 함수이다.
function doubleAdder(added, func) {
const doubled = func(added);
return function (num) {
return num + doubled;
};
}
oubleAdder(5, double)(3); // 13
// doubleAdder가 리턴하는 함수를 변수에 저장
const test = doubleAdder(4, double);
test(2); // 10
- 고차 함수 - 함수를 전달인자로 전달받는 함수, 함수를 리턴하는 함수
- 콜백 함수 - 함수의 전달인자로 전달되는 함수
내장 고차 함수
JavaScript에는 기본적으로 내장된 고차 함수가 있는데 그중 배열 메서드인 filter, map, reduce가 대표적인 고차 함수에 해당한다.
1. Array.prototype.filter
let arr = [1, 2, 3, 4, 5];
let even = arr.filter(el => el % 2 === 0);
console.log(even); // [2, 4]- 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 추출하는 메서드이다.
- 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수의 실행 결과가 true인 요소만을 추출하고 새로운 배열로 반환한다.
- 원본 배열은 변경되지 않는다.
2. Array.prototype.map
let arr = [1, 2, 3, 4, 5];
let square = arr.map(el => el * el);
console.log(square); // [1, 4, 9, 16, 25]
// 배열의 위치(index) 조회
let arr = [1, 2, 3, 4, 5];
let squareIndex = arr.map((el, idx) => idx);
console.log(squareIndex); // [0, 1, 2, 3, 4]
// 객체
let obj = [{id: 1, name: 'lee'}, {id:2, name: 'kim'}, {id: 3, name: 'park'}];
let objName = obj.map(item => item.name);
console.log(objName); // ['lee', 'kim', 'park']- 모든 배열의 요소 값을 다른 값으로 mapping하는 메서드
- 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수의 반환값으로 새로운 배열을 반환한다.
- 원본 배열은 변경되지 않는다.
고차 함수 사용 시 주의할 점
중괄호만 생략할 경우
let arr = [1, 2, 3, 4, 5];
let square = arr.map(el =>
return el * el
);
console.log(square); // Uncaught SyntaxError: Unexpected token 'return'return만 생략할 경우
let arr = [1, 2, 3, 4, 5];
let square = arr.map(el => {
el * el
});
console.log(square); // [undefined, undefined, undefined, undefined, undefined]- 중괄호와 return을 생략하고자 할 때는 둘 다 생략해야 한다.
둘 중 하나만 생략 시 에러가 발생한다... (초보자들이 많이 하는 실수)
