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

호출 스택

 

함수가 호출() 될 때 호출스택에 들어간다고 생각하고 끝날 떄 }를 나간다고 생각하면 편하다.

다만 호출 스택으로 설명이 안되는 것이 있다 바로 setInterval(tick, 2000) 이다.

 

호출 스택, 백그라운드(노드 내부 엔진), 태스크 큐(백그라운드에서 보낸 콜백들이 실행 대기중)로 구성되어 있다

 

먼저 setInterval(tick, 2000) 함수가 호출스택에서 실행된다. 

실행이 끝나면 호출스택에서 사라진다. 백그라운드에서 tick이 2초마다 호출스택에 다시 넣어준다.

호출스택에 넣어줘야 다시 실행이 되기 때문이다.

백그라운드에 여러개의 작업들이 들어가 있을 수 있다.

ex) 이벤트리스너, 프로미스 등등 콜백함수가 비동기적으로 실행될 수 있게 대기중이다. 

 

이벤트 루프: 무한루프처럼 돈다

 

1) 호출 스택, 백그라운드(노드 내부 엔진), 태스크 큐(백그라운드에서 보낸 콜백들이 실행 대기중)로 구성되어 있다

 

2) 백그라운드가 2초마다 tick을 보내는데 이것을 바로 호출스택으로 보내는것이 아닌 태스크 큐로 보낸다.

 

 

3) 이 때 이벤트루프는 호출스택이 비어져있으면 태스크 큐에서 함수를 꺼내서 호출스택으로 올려놓는다.

4) 호출스택으로 올리게 되면 함수는 실행되어지고 사라진다.

 

5) 다시, 2초후에 백그라운드에서 태스크 큐로 보내면서 1)의 과정을 반복하게 된다.

그러면 이벤트루프가 다시 올리는 작업을 반복한다. 

 

참고 

• 인프런 - 제로초 강의