[Javascript] 콜백(Callback) 함수란?

 콜백(Callback) 함수를 쉽게 이해하기 위해서는 Javascript에 동기, 비동기 동작 방식에 대한 이해가 필요합니다. 이 부분은 아래 링크의 글을 읽어주시면 감사하겠습니다.

 

2023.04.10 - [Languages/Javascript] - [Javascript]동기와 비동기의 이해 콜 스택(Call Stack) 이해하기

[Javascript]동기와 비동기의 이해 콜 스택(Call Stack) 이해하기

 

---

콜백(Callback) 함수란?

콜백(Callback) 함수란 특정 함수가 실행이 되고 난 후 그 이후에 실행될 함수를 의미합니다. Javascript에서의 함수는 객체(Object)입니다. 따라서 함수가 다른 함수의 인자 또는 반환될 수 있습니다. 그중 인자로 전달된 함수를 콜백(Callback) 함수라고 합니다.

 

 

---

콜백(Callback) 함수는 언제 사용할까?

Javascript는 이벤트 중심의 싱글 스레드 언어이기 때문에 이벤트 하나가 실행된 후 기다리지 않고 다음 이벤트가 실행됩니다.  예제 하나를 확인해보겠습니다. 

 

function A(){
  console.log("A");
}
function B(){
  console.log("B");
}
A();
B();

//결과
A
B

 

 위의 코드를 보면 A함수가 실행되고, 그다음 B의 함수가 실행됩니다. 이런 방식에서는 콜백(Callback) 함수가 필요가 없을 것이다. 하지만 A의 응답이 오래 걸린다면 어떻게 될 것인가? Javascript의 타이머 함수를 사용하여 확인해보겠습니다. 

 

function A(){
  setTimeout( function(){
    console.log("A");
  }, 500 );
}
function B(){
  console.log("B");
}
A();
B();

//결과 
B
A

 

 이번에는 결과가 다르게 나오게 됩니다. 그 이유는 A 함수가 호출된 후 0.5초의 딜레이 후 실행이 됩니다. 하지만 A가 호출된 후 B가 바로 호출되고 즉시 실행이 되기 때문에 위와 같은 결과를 갖게 됩니다. 0.5의 딜레이를 비동기 통신 사용 시에 서버와의 통신 시간이라고 가정한다면, 응답이 끝나고 작동해야 할 함수가 있다면, 그것이 콜백(Callback) 함수입니다.

---

 

콜백(Callback) 함수 예제

 

function deriveTime(name, Callback) {
  alert(`${name} Starting derive`);
  Callback();
}
function endDerive(){
  alert("end");
}
deriveTime('Tom', endDerive);

//결과
//Tom Starting derive
//end

 

여기에서 콜백(Callback) 함수는 endDerive 함수이다. deriveTime함수가 실행 되고, 운전자의 이름과 콜백(Callback) 함수를 인자로 넘긴다. 그렇게 되면, deriveTime 함수가 실행이 된 후 콜백(Callback) 함수가 실행 된다.