고차함수(Higher Order Function)
이전의 프로토타입 체인 등을 공부했던 내용을 떠올려보면 JavaScript에서의 함수는 객체로 받고 있다는 것을 알 수 있을 것이다.
const message = () => {
console.log('함수는 객체라서, 이렇게 변수에 할당할 수 있다.')
}
function example(message) {
console.log('변수에 할당할 수 있다보니, 함수의 인자로도 전달할 수 있다.')
return message;
// 그리고 함수의 반환값으로 함수를 전달할 수도 있다.
}
위의 내용을 콘솔창에 입력하면 아래와 같이 결과를 볼 수 있다.
콜백 함수(Callback Function)
고차 함수의 형태 중에선 ‘다른 함수의 인자’로 전달되는 함수가 있는데, 이를 콜백 함수라고 부른다.
const button = document.querySelector('#btn');
button.addEventHandler('click', sayHello());
function sayHello() {
console.log("안녕하세요!")
}
위의 코드에서 sayHello()
라는 함수는 button
이라는 문서 객체 내에 addEventHandler
라는 메소드(함수)를 통해 인자로 보내진다.
이 인자는 버튼을 클릭하기 전까지는 동작하지 않으나, 버튼을 클릭하는 이벤트가 작동될 때, 이벤트 호출을 받아와 인자에 있는 sayHello()
함수를 반환하여 내용을 작동시키게 한다.
즉, 어떤 이벤트나 작업이 이루어질 때 호출되여 작동한다는 의미로서 답신의 의미인 ‘Callback’을 담아 ‘콜백 함수’라고 불리게 된다.
커리 함수(Curry Function)
const curryExample = () => {
return () => {
console.log("커리 함수입니다!");
}
};
curryExample;
// function curryExample() {
// return () => {
// console.log("커리 함수입니다!");
// }
// }
// 변수의 내용인 함수 내용 자체를 가져온다.
curryExample();
// () => {
// return console.log("커리 함수입니다!");
// }
// 함수를 실행하면 curryExample 함수가 반환하는 함수의 내용을 가져온다.
위와 같은 형태처럼 외부 함수를 실행하면 return값으로 내부의 함수를 반환하는 형태를 가진다. (이러한 형태를 클로저라고 부르는데 해당 내용은 추후에 다룰 것이다.)
이런 경우, 반환 값으로 받고 있는 내부에 있는 함수를 실행하려면 어떻게 해야할까? 바로 아래와 같이 실행하면 된다.
curryExample()();
// 커리 함수입니다!
앞서 변수 curryExample
를 받아오면 함수의 내용을 반환한다.
함수 표현식으로 만들었으니, 이 변수를 함수로서 호출하면 그 함수의 실행 결과를 반환한다.
내부 함수의 값을 반환하려면, 결국 함수 curryExample
함수의 실행 결과로서 반환된 함수를 실행해야 하는 건데 이 방식은 위의 내용처럼 이어서 호출하는 것으로 값을 받아올 수 있게 된다.
위의 내용을 응용하면 이런 식으로도 표현할 수 있다.
const curryExample = () => {
return () => {
console.log("커리 함수입니다!");
}
};
const ex1 = curryExample();
console.log(ex1);
console.log(ex1());
JavaScript의 함수는 이런 커리 함수와 콜백 함수를 사용하지 않을 수도 있고, 단독적으로 쓰거나 함께 적용할 수도 있다.
배열의 내장 고차 함수