Stack, Queue를 이용한 웹 동작원리

자바스크립트는

console.log(1+1)
setTimeout(function() { console.log(2+2) },1000)
console.log(3+3)

이렇게 적으면, 2,6이 콘솔창에 같이 나오고, 1초 뒤, 4가 나온다. 즉, 코드를 위에적든 밑에적은 빠른거부터 실행하게 된다.

왜 그런지 궁금하면, 동작원리를 알아보자.

웹브라우저 내부엔 Stack이란 공간과 Heap이란 공간이 있다.

이런 식으로 Heap에는 변수들이 있고, Stack에서 실행할 때 Heap이란 공간에서 가져와서 쓴다고 한다.

Stack은 코드 실행을 하는 곳이다. 근데, setTime같은 코드는 대기실에 넣어놨다가 1초뒤에 Stack에 오게 된다.

이렇게 대기실에 있는 코드는 Ajax요청, 이벤트리스너, setTimeout같은 코드들이 있다.

이런 대기실은 Queue라고 부르며, 여기에 줄을 세워놓고 Stack으로 하나씩 올려보낸다. 근데 여기서 Stack이 비어있을 때만 올려보내는 조건이 있다.

그래서 맨 위의 코드가 1+1 3+3을 모두 실행한 후, 2+2를 실행하게 되는 것이다.