안녕하세요. 박기린 입니다.
이번에는 Callback(콜백) 함수에 대해 알아보겠습니다.
우선 콜백함수를 알기 전에, First-Class Functions와 Higher-Order Functions의 개념을 알아둬야 합니다.
First-Class Functions (일급 함수)
function sayHello() {
return "Hello, ";
}
function greeting(helloMessage, name) {
console.log(helloMessage() + name);
}
// Pass `sayHello` as an argument to `greeting` function
greeting(sayHello, "JavaScript!"); // Hello, JavaScript!
// 코드 출처 : https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function자바스크립트는 function(함수)를 object(reference) type의 value로 취급합니다.이렇듯 함수를 다른 변수와 동일하게 다루는 것을 First-Class Functions(일급함수)라고 부릅니다.
즉, 함수의 인수로 함수를 넘길 수 있습니다.
위의 코드가 바로 그 예시입니다. greeting이라는 함수에 sayHello 함수를 인수로 전달한 후 실행한 모습입니다.
Higher-Order Functions (고차 함수)
자바스크립트의 함수 중,
1. 또 다른 함수를 인수로 받거나
2. 함수를 return 하는 경우
Higher-Order Functions라고도 부릅니다.
Higher-Order Functions(고차함수)는 First-Class Functions(일급 함수)라는 개념이 존재할 때 성립이 가능합니다.
위의 예제 코드에서 'greeting' 함수가 바로 고차함수라고 볼 수 있습니다.
추가 예시
const oneWord = function (str) {
return str.replace(/ /g, '').toLowerCase();
};
const upperFirstWord = function (str) {
const [first, ...others] = str.split(' ');
return [first.toUpperCase(), ...others].join(' ');
};이렇게 두 개의 함수가 있습니다.
oneWord : 모든 String의 띄어쓰기를 없애고 다닥다닥 붙입니다. (hi my name -> himyname)
upperFirstWord : String의 첫 단어를 전부 대문자로 만듭니다. (hi my name -> HI my name)
// Higher-order function
const transformer = function (str, fn) {
console.log(`Original string: ${str}`);
console.log(`Transformed string: ${fn(str)}`);
console.log(`Transformed by: ${fn.name}`);
};위의 함수들을 인수로 받을 transformer 함수가 있습니다.
transformer 함수에 upperFirstWord, oneWord를 각각 적용한 후의 결과값입니다.
Callback Functions (콜백 함수)
콜백함수는 다른 함수에 인수로 넘겨져서 특정 이벤트 (예를 들면, 화면의 버튼을 눌렀거나, 키보드로 엔터를 눌렀을 때) 가 발생했을 때 작동하는 함수입니다. 즉, 'First-Class Functions', 'Higher-Order Functions'의 개념을 그대로 사용합니다.
자바스크립트에서 콜백함수를 자주 사용하는 이유는
1. 분할과 재사용이 가능하고,
2. Higher-Order Functions 구조로 이루어져 있어, 추상화(abstraction)에 유용하기 때문입니다.
추상화는 객체지향 프로그래밍, 선언형 프로그래밍(Declarative Programming)에서 자주 사용되는 개념입니다. 코드를 너무 디테일하게 구현부터 하는 것이 아니라, 대략적인 구상을 먼저 할 수 있도록 도움을 줍니다.
예시
const high5 = function () {
console.log('👋');
};
document.body.addEventListener('click', high5);
// high5 - callBack function, addEventListener - higher order functionhtml의 <body 태그> 부분을 아무대나 누르면
콘솔에 '👋'가 출력되는 콜백함수 입니다.
'JS > JavaScript 강의' 카테고리의 다른 글
| 46. Bind Method (0) | 2022.11.30 |
|---|---|
| 45. Call and Apply Methods (0) | 2022.11.29 |
| 43. Default Parameters, Reference Arguments In Function (0) | 2022.11.25 |
| 42-2. String 내장 메소드를 응용해보기 (0) | 2022.11.23 |
| 42. String 내장 메소드를 응용해보기 (0) | 2022.11.22 |
