[Javascript] 이벤트 루프 Event Loop

이벤트 루프는 아래 문장으로 정리가 된다.

"One Thread == One Call Stack == One Thing at a time"

 

Javascript는 Call stack, web APIs, Callback Queue 공간이 있다.

위 3개의 공간에 대해 설명을 진행하고 Event Loop의 문장을 보면 이해가 될 것이다.

 

Call stack

아래와 같은 코드가 있다고 했을 때 Call stack이 어떻게 쌓이는지 확인해보자.

function sayHi(name) {
    who(name);
}
 
function who(name) {
    print("Hi, " + name);
}
 
function print(txt) {
    console.log(txt);
}
 
sayHi("y0ngha");

1. main()
2. main() - sayHi()
3. main() - sayHi() - who()
4. main() - sayHi() - who() - print()
5. main() - sayHi() - who() - print() - console.log()

위 순서로 Stack이 쌓이게 되고 Stack의 동작 원리 답게 다음부터는 역순으로 진행된다.

 

web APIs

함수를 동기 호출하게 되면 Call Stack에 쌓이게 된다는 것은 알고 있다.

이 때 만약 Ajax, setTimeout, Dom Event가 발생되면 Javascript Engien은 Call Stack에서 web APIs 라는 공간으로 이동시킨다.

정해진 시간 혹은 발생 순간에 Callback Queue로 이동을 시킨다.

(즉, setTimeout, Ajax 등 비동기 호출이 발생되었을 때 web APIs로 이동 시키고 완료 되면 Callback Queue로 이동을 시킨다는 것이다.)

 

Callback Queue

Call Stack에 쌓여 있던 것들이 모두 제거되면 차례대로 스택에 쌓여 실행되게 하는 Queue다.

 

그럼 Event Loop에 대한 이해를 돕는 코드를 보도록 하자.

console.log("1");
 
setTimeout(function cb() {
    console.log("2");
}, 0);
 
console.log("3");
 
/**
 * 기대 값 : 1, 2, 3
 * 실행 값 : 1, 3, 2
 */

개발자의 의도는 '1, 2, 3' 으로 호출 하는 것이었는데 실행해보면 값이 다르게 보여진다.

왜냐하면 Event Loop에 의해서인데, 이 내용에 대해 한번 Call Stack, web APIs, Callback Queue, Console에 대해 정리해보도록 하겠다.

	Call Stack	web APIs	Callback Queue	Console
1	main()
2	console.log() main()
3	main()			"1"
4	setTimeout cb main()	cb Timer 작동...		"1"
5	main()		cb(Timer 완료)	"1"
6	console.log() main()		cb (Call Stack이 안비어서 이동 불가)
7	main()		cb	"1" "3"
8			cb	"1" "3"
9	cb			"1" "3"
10	console.log() cb			"1" "3"
11	cb			"1" "3" "2"
12				"1" "3" "2"

이 내용을 테스트하며 실제로 값이 들어가는 것에 대한 볼 수 있는 참고 사이트를 남겨 놓도록 하겠다.

 

http://latentflip.com/loupe

http://latentflip.com/loupe/