비동기 관련 질문있습니다

안녕하세요 yjk8871님!

질문해 주신 내용과 같이 실제로 setTimeout에 지정해준 지연 시간이 모두 지났음에도 call stack에 작업이 남아있다면, setTimeout을 통해 실행한 내용은 call stack이 완전히 비워질 때까지 계속해서 기다리게 됩니다.

이는 아래의 코드를 Chrome 콘솔 탭에서 실행해 보면 직접 눈으로 확인할 수 있습니다.

const stuckInStack = function() {
    let count = 0;
    for(let i = 0; i < 10000000000; i = i + 1) {
        count = count + 1;
    }
    console.log(count)
}

console.log("I am the first one")

setTimeout(() => {
    console.log("I am in callback queue")
}, 0)

stuckInStack()

console.log("I am in call stack")

stuckInStack 함수는 10000000000번 반복하는 반복문을 내재한 함수입니다.
이는 작업 처리 시간이 사람의 눈에 띌 정도로 오래 걸릴 것입니다.
때문에 브라우저가 멈춘 것처럼 보일 수 있지만, 잠시 기다려주시면 됩니다!
console.log("I am the first one")는 call stack에 들어가는 코드입니다.
작성된 setTimeout의 지연시간은 0초입니다.
즉, 지연되는 시간 없이 바로 실행될 수 있는 코드입니다. 하지만 callback queue에 들어가죠.
stuckInStack 함수를 실행합니다.
console.log("I am in call stack")는 call stack에 들어가는 코드입니다.

만약 call stack, callback queue의 개념이 없었다면, 위 코드를 실행해서 출력되는 결과값은

"I am the first one"
"I am in callback queue"
10000000000
"I am in call stack"

위와 같은 순서일 것입니다. setTimeout이 지연시키는 시간 없이 0초만에 실행될 것이기 때문이죠.

하지만 실제 코드를 실행한 결과는 다릅니다.

"I am the first one"
10000000000
"I am in call stack"
"I am in callback queue"

먼저 "I am the first one" 문자열이 출력됩니다. 가장 먼저 실행되는 코드이기 때문이죠.

이후, setTimeout이 실행됩니다. 이는 0초를 지연시키기 때문에 사실상 바로 실행되어야 하죠.

따라서 "I am in callback queue" 문구가 출력될 것 같지만, 강의에서 언급한 것처럼 setTimeout은 작업이 완료 되었어도 callback queue에 먼저 들어가 있게 됩니다.

그리고 stuckInStack 함수가 실행됩니다. 이는 오랜 시간이 걸리는 함수죠?

그동안 "I am in callback queue" 문구가 출력되지 않는 것을 보면 setTimeout이 먼저 실행 됐음에도 stuckInStack함수를 기다리고 있다는 점을 직접 확인할 수 있습니다.

이후 stuckInStack 함수가 종료되며 10000000000이라는 숫자가 출력됩니다.

다음으로는 가장 아래줄의 console.log()가 실행되며 "I am in call stack" 문구가 출력되고,

마지막으로 call stack이 모두 비워진 것이 확인되면, callback queue가 지니고 있던 함수의 작업 결과를 call stack으로 이동시키고 "I am in callback queue" 문구가 출력됩니다.

코드의 실행 순서와 별개로 setTimeout과 같은 함수의 결과들은 반드시 먼저 callback queue에 넘겨지기 때문에 위와 같이 동작합니다.

만약 왜 이렇게 동작 하는지 더 알아보고자 하신다면, 자바스크립트의 Event loop에 대해 검색해 보시면 도움이 되리라 생각됩니다!

감사합니다 :)

인프런 커뮤니티 질문&답변