자바스크립트 - 이벤트 루프

이벤트 루프(Event Loop)는 함수의 호출 구조를 조금 더 자세하게 볼 수 있습니다.

이벤트 루프의 테스크 큐는 어떠한 이벤트를 기다렸다가 실행되는 방법이라 볼 수 있습니다.

호출 스택에 들어왔을 때 바로 실행되는 것이 아닌 테스크 큐를 한번 거쳐 실행되는 방식입니다.

function run(){
	console.log("HEllo world");
}
console.log("camel");
setTimeout(run, 2000);
console.log("source");

setTimeout은 전역 객체 window내에 있는 함수로

두번째 인자만큼의 시간이 흐른 뒤에 첫번째 인자를 실행하는 함수입니다.

코드의 실행 결과 입니다.

 

결과

camel
source
HEllo world

run 코드 이전에 source가 호출되는 것을 확인할 수 있습니다.

이 코드가 실행되는 방식은 다음과 같습니다.

• 호출 스택에 main, setTimeout이 쌓입니다.
• main에 있는 console.log("camel")이 호출 스택에 놓이고 실행뒤 pop이 됩니다.
• setTimeout이 호출스택에서 지워지고 run함수와 타이머 2초가 백그라운드라는 공간으로 갑니다.
• 전역 main의 console.log("source")가 실행되고 pop이 되고 main까지 비워져 호출스택이 비워집니다.
• 2초가 지난 뒤에 백그라운드의 run함수가 테스크 큐에 들어갑니다.
• 이벤트 루프는 호출스택이 비어져있을 때 호출 스택에 테스크 큐에 있는 함수를 올립니다.
• 호출 스택에 있는 run이 실행되고 pop이 되어 비워집니다.

이러한 구조로 테스크 큐에서 콜 스택으로 이동하기 전에 콜 스택이 비어있는지 확인하고 테스크 큐안에 있는 front부터 실행이 되기 때문에 타임아웃 시간이 정확하지 않을 수도 있다는 점은 유의해야합니다.

 

이런식으로 자바스크립트는 어떤 함수에 대해서는

바로 실행하는 것이 아닌 어떠한 이벤트 이후에 실행되는 비동기 실행방식을 사용할 수 있습니다.