일급객체
JavaScript에도 특별한 대우를 받는 일급 객체가 있는데 그 중 하나는 함수이다. 함수는 아래와 같이 특별하게 취급된다.
- 변수에 할당 할 수 있다.
- 다른 함수의 전달인자로 전달될 수 있다.
- 다른 함수의 결과로 리턴될 수 있다.
// 변수에 함수를 할당하는 경우
const square = function (num) {
return num * num
}함수는 변수에 저장된 데이터를 전달 인자로 받거나, 리턴 값으로 사용할 수 있다.
고차함수
- 고차 함수는 함수를 전달인자로 받을 수 있고 함수를 리턴할 수 있는 함수를 의미한다.
- 콜백 함수를 전달받은 고차함수는 함수 내부에서 콜백함수를 호출하며 조건에 따라 함수의 실행 여부도 결정할 수 있다.
- 논리학자 하스켈 커리(Haskell Curry)의 이름을 따, 커링 함수라고 한다.여기서 커링함수는 클로저의 특징을 이용한 기법이다.
콜백함수는 다른 함수의 전달인자로 전달되는 함수를 의미한다.
'함수를 리턴하는 함수'와 '함수를 전달인자로 받는 함수' 모두, 고차 함수이다.
1. 다른 함수를 인자로 받는 경우
function double(num) {
return num * 2;
}
function doubleNum(func, num) {
return func(num);
}
let output = doubleNum(double, 4);
console.log(output); // -> 8- 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수다.
- 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우 함수 func는 함수는 doubleNum의 콜백 함수다.
- 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수다.
2. 함수를 리턴하는 경우
function adder(added) {
return function (num) {
return num + added;
};
}
let output = adder(5)(3);
console.log(output); // -> 8
const add3 = adder(3);
output = add3(2);
console.log(output); // -> 5- 함수 adder는 다른 함수를 리턴하는 고차 함수다.
- adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴한다.
- 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴한다.
- adder가 리턴하는 함수를 변수에 저장할 수 있다.
- adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있다.
3. 함수를 인자로 받고, 함수를 리턴하는 경우
function double(num) {
return num * 2;
}
function doubleAdder(added, func) {
const doubled = func(added);
return function (num) {
return num + doubled;
};
}
doubleAdder(5, double)(3); // -> 13
const addTwice3 = doubleAdder(3, double);
addTwice3(2); // --> 8- 함수 doubleAdder는 고차 함수다.
- 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수다.
- 함수 double은 함수 doubleAdder의 콜백으로 전달되었습니다.
- doubleAdder가 리턴하는 함수를 변수에 저장할 수 있습니다. (일급 객체)
- doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있습니다.
내장 고차 함수
JavaScript에는 기본적으로 내장된 고차 함수가 여러개 있는데, 그중에서 배열 메서드들 중 일부가 대표적인 고차 함수에 해당한다.
예를 들면, Array.prototype.map, Array.prototype.filter 그리고 Array.prototype.reduce가 언어 내부에 포함된 (built-in) 고차함수다.
filter
- 배열의 각 요소가 특정 함수에 따라 true라면 새 배열에 담아 준다.
- 기존배열을 수정하지 않는다.
const isEven = function (num) {
return num % 2 === 0;
};
let arr = [1, 2, 3, 4];
let output = arr.filter(isEven);
console.log(output); // ->> [2, 4]✔ filter 메서드는 배열의 요소를 콜백 함수에 전달하고 콜백 함수는 전달받은 배열의 요소를 받아 함수를 실행해 내부의 조건에 따라 true, false를 리턴해야 한다.
map
- 배열의 각 요소가 특정 함수에 의해 다른 요소로 지정 된다.
- 행동은 직접 작성하여 인자로 넣어줘야 한다.
- 기존배열을 수정하지 않는다.
let arr = [1,2,3];
let result = arr.map(function(el) {
return el * 2
});
console.log(result) // ->> [2,4,6]✔ map 메서드는 모든 요소에게 동일한 행동을 준 값을 반환한다.
reduce
- 배열의 각 요소를 특정 함수에 따라 원하는 하나의 형태로 응축된다.
const arr = [1, 2, 3];
const result = arr.reduce((acc, cur, idx) => {
let newAcc = acc + cur;
return newAcc;
})
result;✔ reduce의 초기값이 없다면 배열의 첫 번째 요소가 초기값이 된다 .
const arr = [1, 2, 3];
const result = arr.reduce((acc, cur, idx) => {
let newAcc = acc + cur;
return newAcc;
}, 1)
result;✔ reduce의 초기값이 있다면 배열의 그 값은 현재값이 된다.
고차함수를 쓰는 이유
추상화 : 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것
함수를 통해 얻은 추상화를 한 단계 높인 것이 고차함수로, 값에 대한 복잡한 로직은 감추고 단순히 값을 전달받아 처리하는 수준으로 작업을 수행할 수 있다.
- 고차함수를 통해 보다 높은 수준으로 생각할 수 있다.
- 추상화의 수준이 높아지는 만큼 생산성도 상승한다.
꾸준하게 기록하기