자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다.
이벤트 루프에서는 이벤트 발생 시 호출되는 콜백 함수들을 task queue에 전달하고, task queue에 담겨있는 콜백 함수들을 call stack에 넘겨준다.
* 이벤트 루프가 task queue에서 call stack으로 콜백 함수를 넘겨주는 작업은 call stack에 쌓여있는 함수가 없을 때만 수행
태스크 큐에서는 web api에서 비동기 작업들이 실행된 후 호출되는 콜백함수들이 기다리는 공간이다.
* 이벤트 루프가 정해준 순서대로 줄을 서있으며, FIFO방식을 따른다.
- 코드가 호출스택에 쌓인 후, 실행되면 자바스크립트 엔진은 비동기 작업을 Web API에게 위임한다.
- Web API는 해당 비동기 작업을 수행하고, 콜백 함수를 이벤트 루프를 통해서 태스트 큐에 넘겨주게된다.
- 이벤트 루프는 콜스택에 쌓여있는 함수가 없을 때, 태스크 큐에서 대기하고 있던 콜백함수를 콜스택으로 넘겨준다.
- 콜스택에 쌓인 콜백함수가 실행되고, 콜스택에서 제거된다.
function printHello(){
print('hello');
}
function printBye(){
print('bye');
}
// 특정 함수를 매개변수로 받아서 3초 뒤에 실행하는 함수
function sleepAndExecute(sleepTimeSecond, callback){
sleep(sleepTimeSecond); // sleepTimeSecond 초 만큼 대기
callback(); // 전달된 callback 실행
}
// 3초 뒤에 hello 출력하기
sleepAndExecute(3, printHello);
// 5초 뒤에 bye 출력하기
sleepAndExecute(5, printBye);
sleepAndExecute(3, printHello);
에서는 printHello
를 sleepAndExecute
의 매개변수(인자)로 전달하므로,
printHello
는 callback 함수라고 할 수 있다.
마찬가지로, sleepAndExecute(5, printBye)
에서는 printBye
를 sleepAndExecute
의 매개변수(인자)로 전달하므로,
printBye
는 callback 함수라고 할 수도 있다.
function onCableConnected(){
print("케이블이 연결되었습니다");
};
//케이블이 연결될 때 마다 전달된 onCableConnected가 호출된다고 가정
setOnCableConnected(onCableConnected);
setOnCableConnected
로 설정한 함수가, 케이블을 연결할 때 마다 호출되므로,
onCableConnected
는 "어떤 이벤트에 의해 호출되어지는 함수", 즉 callback 함수 라고 할 수 있다.