[JavaScript] 콜백함수(Callback Function) 단계별로 이해하고 실습

콜백(Callback Function)함수란?

자바스크립트 함수 표현식에서 익명 함수의 대표적인 용도가 바로 콜백함수 이다. 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말한다. 또한, 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수 또한 콜백 함수가 될 수 있다. 

---

콜백(Callback Function)함수 단계별로 이해하기

1단계 

함수도 데이터 타입의 일종이기 때문에 값처럼 주고 받을 수 있다.

function func() {
    console.log("func 호출됨");
}
var f1 = func;
var f2 = f1;
func();  
f1();
f2();

2단계 

함수는 매개변수로 함수를 받을 수 있다.

function func(callback) {
    console.log( typeof (callback) );
    // 넘어온 함수 실행하기
    callback();
}
 
function myCall() {
    console.log("myCall 호출됨");
}
//func(myCall());
func(myCall);

func 함수에 매개변수 callback에 myCall 함수를 전달 하였다. 그래서 func 함수 안에서 callback() 문으로  myCall함수를 실행 시킬 수 있는 것이다. 

myCall() 함수 실행문을 매개변수로 전달 할 수 없다. 

또 함수는 익명 함수를 전달 받을수 있다.

function func(callback) {
    console.log( typeof (callback) );
    // 넘어온 함수 실행하기
    callback();
}
 
var aFunc = function () {
    console.log("익명함수 호출됨...")
}
 
func(aFunc);

3단계 

함수는 함수의 결과로 함수를 리턴할 수 있다.

function func () {
    function cb() {
        console.log("리턴된 함수 실행");
    }
    return cb;
}
func(); // 값 : func함수 안에 있는 cb함수
func()(); // 출력 : 리턴된 함수 실행
 
var myCb = func(); // myCb 변수에 func() 값인 cb함수를 전달한다.
console.log(typeof (myCb)); // 출력 : function
myCb(); // 출력 : 리턴된 함수 실행

func 함수안에 cb 함수가 정의 되어있고 cb 함수를 반환 하였다.  그래서 func() 는 cb 함수 그 자체이고 func()() 는 cb() 인 것이다.  func()()는 알아보기 힘드니  var myCb 에 func()를 저장 하였다. 혹시 몰라 var myCb 타입 체크를 하였더니 예상 결과 function이 나왔다. 즉 함수가 된것이다.  마지막으로 myCb() 로 cb 함수를 실행 시켰다. 

마지막으로 return문에 직접 익명함수를 정의하여 반환할 수 있다.

function func1 () {
    return function () { 
        console.log("리턴된 함수 실행1"); 
    };
}
func1()();
 
var myCb1 = func1();
myCb1();

이제는 위의 코드가 쉽게 느껴질 것이다. return 문 안에 익명함수를 정의하였다. 나머지는 위 예제랑 똑같다. 다음엔 콜백함수의 대표적인 setInterval 함수를 이해해보자

손병찬 선생님, 비트캠프 수업(2017)