🔥 고차함수
1. 일급 객체
함수 (대표적인 JavaScript 일급 객체)
- 변수에 할당(assignment)할 수 있다.
- 다른 함수의 전달인자(argument)로 전달될 수 있다.
- 다른 함수의 결과로서 리턴될 수 있다.
-> 함수를 배열의 요소나 객체의 속성값으로 지정할 수 있다. & 함수를 데이터처럼 다룰 수 있다.
변수에 함수를 할당하는 경우
// 변수 square에 함수를 할당하는 함수 표현식, 함수표현식은 할당 전에 사용 x
const square = function (num) {
return num * num
};
// 변수 square에 함수가 할당되어 있으므로, 함수 호출 연산자'()' 사용 가능
output = square(5);
console.log(output); // 25다른 함수를 인자로 받는 경우
function double(num) {
return num * 2;
}
// 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수
// 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우, 함수 func는 함수 doubleNum의 콜백 함수
function doubleNum(func, num) {
return func(num);
}
// 함수 double은 함수 doubleNum의 콜백 함수
let output = doubleNum(double, 5);
console.log(output); // 10함수를 리턴하는 경우
// 함수 adder는 다른 함수를 리턴하는 고차 함수
// adder는 인자 한 개를 입력받아 함수(익명 함수) 리턴
// 리턴되는 익명 함수는 인자 한 개를 받아 added와 더한 값을 리턴
function adder(added) {
return function (num) {
return num + added;
};
}
// adder(2)는 함수이므로 함수 호출 연산자'()'를 사용 가능
let output = adder(2)(3); // 5
console.log(output); // 5
// adder가 리턴하는 함수를 변수에 저장 가능 -> javascript에서 함수는 일급 객체이기 때문
const add3 = adder(4);
output = add3(5);
console.log(output); // 9함수를 인자로 받고, 함수를 리턴하는 경우
function double(num) {
return num * 3;
}
// 함수 doubleAdder는 고차 함수
// 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수
// 함수 double은 함수 doubleAdder의 콜백으로 전달
function doubleAdder(added, func) {
const doubled = func(added);
return function (num) {
return num + doubled;
};
}
// doubleAdder(2, double)는 함수이므로 함수 호출 기호 '()'를 사용 가능
doubleAdder(2, double)(4); // 10
// doubleAdder가 리턴하는 함수를 변수에 저장 가능 -> 일급 객체
const addTwice3 = doubleAdder(3, double);
addTwice3(5); // 14
2. 고차 함수의 이해
고차 함수(higher order function)
: 함수를 전달인자(argument)로 받는 함수, 함수를 리턴할 수 있는 함수
( 함수가 일급 객체라서 고차 함수로 활용 가능 )
콜백 함수(callback function)
: 다른 함수(caller)의 전달인자(argument)로 전달되는 함수
- 콜백 함수를 전달받은 고차 함수(caller)는
- 함수 내부에서 콜백 함수를 호출(invoke)할 수 있고,
- 조건에 따라 콜백 함수의 실행 여부를 결정할 수 있고,
- 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있다.
커링 함수
: 함수를 리턴하는 함수 ( 커링 함수를 사용하는 경우 고차 함수라는 용어를 '함수를 전달인자로 받는 함수'에만 한정해 사용하기도 한다. => 고차 함수가 커링함수를 포함 )
🔥 내장 고차 함수
1. 내장 고차 함수의 이해
JavaScript에 기본적으로 내장된 고차함수가 있다.
대표적인 내장 고차 함수로 filter, map, reduce 등이 있다.
filter
Array.prototype.filter()
: 주어진 함수의 테스트를 통과(true)하는 모든 요소를 모아 새로운 배열 반환
const words = ['apple', 'banana', 'peach', 'watermelon'];
const result = words.filter(word => word.length > 5);
console.log(result); // ["banana", "watermelon"]=> 배열의 각 요소가 특정 논리(함수)에 따르면 사실(true)일 때, 따로 분류(filter)한다.
( 조건에 맞는 데이터만 분류(filtering) 할 때 사용 )
map
Array.prototype.map()
: 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열 반환
const array1 = [1, 2, 3, 4];
const map1 = array1.map(x => x * 2);
console.log(map1); // [2, 4, 6, 8]=> 배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map)된다.
( 하나의 데이터를 다른 데이터로 매핑(mapping) 할 때 사용 )
reduce
Array.prototype.reduce()
: 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값 반환
리듀서(reducer) 함수
- acc : 누적값
- cur : 현재값
- idx : 현재 인덱스 , initialValue가 있을 경우 0, 아니면 1부터 시작
- src : 원본 배열
+ initialValue를 넣어주지 않으면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너뛴다. initialValue를 넣어주면 인덱스 0부터 시작한다.
const array1 = [1, 2, 3, 4];
const initialValue = 0;
const sum = array1.reduce((acc, cur) => acc + cur, initialValue);
console.log(sum); // 10=> 배열의 각 요소를 특정 방법(함수)에 따라 원하는 하나의 형태로 응축한다.
( 여러 데이터를, 하나의 데이터로 응축(reduce) 할 때 사용 )
+ 추가 내용
추상화 : 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것
-
함수 : 값을 전달받아 리턴한다. 값에 대한 복잡한 로직은 감추어져 있다.
=> 값 수준에서의 추상화 : 단순히 값을 전달받아 처리하는 수준 -
고차 함수 : 함수를 전달받거나 함수를 리턴한다. 함수에 대한 복잡한 로직은 감추어져 있다. => 사고 수준에서의 추상화 : 함수를 전달받아 처리하는 수준
- Array.prototype.concat() : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열 반환 ( 기존 배열 변경 x )
