[javascript] 호출스택과 이벤트루프

javascript의 실행은 아래 구조로 간략하게 설명될 수 있습니다.

 

 

호출 스택은 javascript안에서 어떤 함수가 실행될 때 들어가는 부분이며 백그라운드는 타이며, 콜백등이 비동기 작업을 위해 대기하는 부분, 태스크 큐는 백그라운드 종료 후 호출되어야 할 콜백 함수들이 보내지는 부분입니다.

function myfunc()
{
	alert('aaa');
};

위와 같은 함수가 호출된다면 호출스택에 myfunc()가 들어가고 그 안에서 다시 alert() 함수가 호출되므로 myfunc() 위에 alert() 함수가 쌓이게 됩니다. 이러한 구조 때문에 스택이 됩니다.

 

호출 스택은 LIFO구조이므로 alert() 함수 호출이 완료되면 호출 스택에서 사라지고 뒤이어 myfunc() 함수로 사라 잡니다.

setTimeout(myfunc, 3000);

위 코드는 타이머 함수로 myfunc() 함수를 3000초 후에 실행하도록 하는데 setTimeout()도 함수이므로 일단 호출 스택에 들어가게 됩니다.

 

이 함수는 내부적으로 3000초 후에 myfunc를 실행해야 하므로 이런 경우 해당 처리를 백그라운드 영역에 넣어 놓습니다. 그리고 setTimeout() 함수는 실행이 종료되었으므로 호출 스택에서 제거됩니다.

 

백그라운드에 들어간 타이머 작업은 3000초의 시간이 지나면 실행 부분인 myfunc() 함수를 실행 태스크 큐로 보내게 되고 태스크 큐에 있는 작업은 실행을 위해 호출 스택에 들어가게 됩니다. 다만 호출스택에 아무것도 없는 상태여야만 들어갈 수 있습니다. 즉, 호출스택에 있는 모든 작업이 마무리되어야 태스크 큐에 있는 작업을 올려주는데, 호출스택이 언제비워진다고 아무도 보장할 수 없으므로 타이머가 정확하지 실행되지 않는 현상이 발생할 수 있습니다.

 

이벤트루프는 태스크 큐에 있는 작업을 스택으로 올려주는등, 어떤 이벤트 발생시 이에 대응해 실행되어야 하는 콜백함수들의 실행과 대기같은 작업을 관리하는 전체적인 프로세스로 이해할 수 있습니다.