Node - 호출 스택, 이벤트 루프

1. 호출 스택

function first(){
    second();
    console.log('첫번째');
}

function second(){
    third();
    console.log('두번째');
}

function third(){
    console.log('세번째');
}

first();

>> 세번째 두번째 첫번째

 

함수를 선언했다는 것은 메모리에 올렸다는 뜻이다.

메모리는 임시 저장 장치이다. 컴퓨터가 잠깐 기억하는 것이다.

 

Anonymous는 파일이 시작될 때 생긴다. 항상 있다고 생각하면 좋다.

가상의 전역 컨텍스트이다.

 

호출스택은 자바스크립트가 어떻게 실행되는 건지 보여준다.

 

동기식 코드이다.

---

2. 이벤트 루프

function run() {
    console.log("3초 후 실행");
}
console.log("Start");
setTimeout(run, 3000);
console.log("End");

setTimeout 은 비동기식으로 작동한다. 비동기식 함수이다.

여기서 이벤트 루프가 나온다.

 

 

코드가 백그라운드로 가면

호출 스택과 백그라운드가 동시에 실행되기 때문에

호출 스택에서 그 다음 동작인 console.log('End'); 가 실행되는 와중에도 백그라운드에서 타이머가 초를 세고 있다.

 

즉, 정리하면 백그라운드에 있으면 동시에 실행이 가능하다.

백그라운드에 있는 함수는 다른 스레드가 실행한다. 비동기적으로 실행된다.

 

anonymous 까지 호출스택에서 나가게 되면 여기서 끝이 아니라,

백그라운드에 아직 타이머가 있으므로 

3초 뒤에 run을 태스크 큐로 보내준다.

그리고 백그라운드에는 run이 지워진다.

 

호출스택이 비어있을 때 태스크 큐에서 함수들을 하나씩 꺼내와서 실행해준다.

 

그래서 콘솔창에는

Start

End

3초후 실행

으로 진행된다.

 

호출스택, 백그라운드, 태스크 큐가 싹 다 비어있으면 자바스크립트 실행이 완료된 것이다.

 

function oneMore(){
    console.log('one more');
}

function run(){
    console.log('run run');
    setTimeout(() => {
        console.log('wow');
    }, 0)
    new Promise((resolve) => {
        resolve('hi');
    })
        .then(console.log);
    oneMore();
}

setTimeout(run, 5000);

 

메모리에 oneMore, run 함수가 먼저 들어간다.

 

setTimeout 함수가 실행되고 나간다.

대신 나가면서 백그라운드로 타이머를 하나를 보내준다.

그후 anonymous 가 끝난다.

 

백그라운드에 타이머가 남아있고 5초 센다.

1 2 3 4 5

 

5초 센 다음에 run 함수를 태스크 큐로 보내준다.

태스크 큐는 항상 호출 스택이 비어있을 때에만 보내준다.

run 함수는 이벤트 루프에 의해서 호출 스택으로 이동한다.

 

run 함수를 실행한다.

 

setTimeout 함수 0은 바로 실행되는 것이 아니다.

setTimeout 함수는 무조건 백그라운드로 가야 된다.

 

그리고 new Promise가 실행된다.

Promise가 실행되는 동안 resolve도 같이 실행된다.

 

Promise는 동기적으로 실행되는데

then 을 만나는 순간 비동기로 간다.

 

즉, resolve 끝나고 new Promise 끝나고

then을 만나는 순간 비동기로 가서

then console.log(hi) 까지 같이 준다.

 

그다음 one more가 실행된다.

 

console.log 실행

oneMore 함수 실행

run 도 실행

그러면 프로그램 끝이냐? 아니다.

아직 백그라운드에 남아 있다.

태스크 큐로 보내준다.

 

setTimeout 의 익명

Promise의 then의 console.log(hi) 가 있는데

 

console.log(hi)가 새치기 한다.

너는 평범한 setTimeout이고 내가 더 우선순위야!

 

이렇게 마무리 된다.

wow가 먼저 인데도 Promise()의 hi가 새치기를 한다.

왜냐하면 Promise()의 then이 우선순위가 더 높기 때문이다.

 

Promise. then/catch

process.nextTick

얘내는 새치기를 한다.