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

사진 출처 : https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 

 

---

 

- 자바스크립트 런타임 환경

아래의 사진은 자바스크립트 런타임 환경 사진입니다.

사진 출처 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

 

 

- Call Stack 

기본적으로 Anonymous는 가상의 전역 콘텍스트로 항상 존재한다고 생각하면 됩니다.

함수의 호출 순서대로 쌓이고 역순으로 실행됩니다.

함수 실행이 완료되면 스택에서 빠져나갑니다.

스택의 LIFO구조입니다.

 

Call stack은 함수의 호출을 저장하는 자료구조입니다.

함수를 호출하면 스택에 쌓이고 또 다른 함수를 호출하면 다음 스택에 쌓으면서

가장 위에 쌓인 함수가 가장 먼저 처리됩니다.

 

 

 

가장먼저 first()을 호출하므로 call stack에 first() 이 쌓입니다.

그 후 first()에서 second()를 호출하므로 call stack에는 second()가 쌓이고,

second()에서는 third()를 호출하므로 call stack에 third()가 마지막으로 쌓입니다.

 

Call stack에서는 가장 위에 놓인 함수를 가장 먼저 처리합니다.

그러므로

Call func3을 가장 먼저 출력하고 차례로 second(), first()가 출력됩니다.

 

 

 

"Node.js 교과서" 사진 일부

 

 

 

- 이벤트 루프 구조

Event Loop : 이벤트 발생(setTimeout 등) 시 호출할 콜백 함수들(위의 예제에서는 run)을 관리하고, 호출할 순서를 결정하는 역할을 합니다.

 

태스크 큐: 이벤트 발생 후 호출되어야 할 콜백 함수들이 순서대로 기다리는 공간입니다.

 

백그라운드: 타이머나 I/O 작업 콜백, 이벤트 리스너들이 대기하는 공간. 여러 작업이 동시에 실행될 수 있습니다.

 

function run(){
    console.log("3초 뒤 실행됩니다.")
}

console.log("시작됩니다.");

setTimeout(run,3000);
console.log("종료");

"Node.js 교과서" 사진 일부

setTimeout이 호출될 때 콜백 함수 run은 백그라운드로 백그라운드에서 3초를 보냅니다.

그 후

3초가 다 지나면 백그라운드에서 태스크 큐로 보내집니다.

 

"Node.js 교과서" 사진 일부

setTimeout과 anonymous가 실행 완료된 후 호출 스택이 완전히 비워지면,

이벤트 루프가 태스크 큐의 콜백을 호출 스택으로 올리게 됩니다.

호출 스택이 비워져야만 올립니다.

만약 호출 스택에 함수가 많이 차 있으면 모두 처리를 하느라 3초가 지난 후에도 run 함수가 태스크 큐에서도 대기하게 됩니다. 이것이 타이머가 정확하지 않을 수 도 있는 이유입니다.

 

 

"Node.js 교과서" 사진 일부

run이 호출 스택에서 실행되고, 완료 후 호출 스택에서 나감

이벤트 루프는 태스크 큐에 다음 함수가 들어올 때까지 계속 대기

태스크 큐는 실제로 여러 개고, 태스크 큐들과 함수들 간의 순서를 이벤트 루프가 결정함

 

 

 

 

ref blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

Node.js 교과서: 기본기에 충실한 Node.js 10 입문서