[자바스크립트] ES6+ 고차함수

고차함수의 기본 개념

고차함수는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 말한다. JavaScript에서 함수는 일급 객체로 취급되기 때문에 함수를 다루는 고차함수를 자주 활용할 수 있다.

 

함수를 인자로 받는 고차함수

아래의 예제에서 higherOrderFunction은 콜백함수 callback을 인자로 받는 고차함수이다.

function higherOrderFunction(callback) {
    console.log('Executing higher order function');
    callback(); // 콜백 함수 호출
}

function callbackFunction() {
    console.log('Executing callback function');
}

higherOrderFunction(callbackFunction);

//Executing higher order function
//Executing callback function

 

함수를 반환하는 고차함수

function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

개인적으로 이부분이 조금 어려웠는데, 아래 순서대로 차근 차근읽어보니 이해가 되었다.

 

• createMultiplier 함수는 multiplier라는 매개변수를 받습니다. 이 매개변수는 숫자를 나타내며, 곱셈 연산에 사용될 값입니다.
• createMultiplier 함수 내부에서는 함수를 반환합니다. 반환된 함수는 number라는 매개변수를 받고, 이 매개변수는 곱셈 연산의 대상이 됩니다.
• 반환된 함수 내부에서는 number와 multiplier를 곱한 값을 반환합니다.
• createMultiplier(2)를 호출하여 반환된 함수를 double 변수에 할당합니다. 이 때, multiplier 매개변수에는 2가 전달됩니다.
• double 변수는 이제 number를 인자로 받아 number * 2를 반환하는 함수가 됩니다.
• double(5)를 호출하면, 내부적으로 5 * 2가 계산되어 10이 반환됩니다.
• 비슷하게 createMultiplier(3)을 호출하여 반환된 함수를 triple 변수에 할당하고, triple(5)를 호출하면 5 * 3이 계산되어 15가 반환됩니다.