자바스크립트 동작원리

예를 들어 아래와 같은 코드를 실행한다고 하자.

console.log(1);
setTimeout(() => console.log(2),1000);
console.log(3);

그러면 결과는 1, 3, 2가 나올 것이다.

다른 언어들은 1, 2, 3으로 출력이 된다.

​

웹브라우저 내부에는 Stack이라는 공간이 있다.

그리고 코드들을 한 줄, 한 줄 Stack에 넣고 차례대로 실행을 한다.

간단하게 그림을 보면 하면 아래와 같다.

위에서부터 한 줄씩 실행을 한다.

​

만약에 실행을 하다가 변수가 있다면 변수를 Heap이라는 공간에서 가져와 처리한다.

​

Stack은 웹브라우저 내부에 딱 한 개 밖에 존재하지 않는다.

그리고 딱 한 줄씩만 실행할 수 있기 때문에 자바스크립트는 single threaded 언어라고 부른다.

​

setTimeout 같은 코드는 즉시 실행이 되지 않는 코드인데 어떻게 처리가 될까?

바로 처리가 되지 않기 때문에 Stack에 가만히 두지 않는다.

그래서 setTimeout 같이 시간이 걸리는 코드는 잠시 대기하도록 별도의 공간으로 빼둔다.

​

이렇게 대기하게 빼두는 코드들이 정해져 있다.

서버에서 뭔가를 받아오는 Ajax 요청 코드,

동작하기 전까지 기다려야하는 Event Listener,

그리고 위에서 살펴본 setTimeout 등이 있다.

​

​

자 , 그럼 대기 공간으로 빼두었던 코드도 때가 되면 다시 stack으로 옮겨서

실행해야 하지 않을까?

​

그런데 이 동작도 순탄하게 바로 진행되지 않는다.

Queue 라는 또 다른 대기 공간이 있는데, 그 곳에 대기가 끝난 순서대로 차곡 차곡 옮긴다.

(위의 그림대로면 setTimeout 코드는 대기 끝난 코드3이 되는 것)

​

그 다음 Queue에서 차례대로 Stack에다가 옮겨서 실행하는 것이다.

​

그런데 이렇게 Queue에서 Stack으로 이동하는 것도 조건이 있다.

Stack이 텅비어 처리할 일이 없을 때만 이동한다.

​

전에 setTimeout() 에 대해 알아 봤었던 내용이지만..

setTimeout에 딜레이 시간을 0으로 주면 딜레이 없이 바로 stack에서 실행하지않는다.

​

왜냐면 setTimeout은 딜레이 시간 상관없이 일단 대기 공간으로 무조건 보내버리기 때문에

stack이 빌 때까지 대기 공간과 Queue에서 기다린다.

​

​

​

이로써 전에 단지 그냥 "그렇구나.." 하고 넘어 갔던 부분에 대해

자세히 알게 된 기분(?)이다.

​

​

​

추가적으로 주의 사항에 대해서 조금 알아보자.

​

그럴 일은 없어야 겠지만..

만약에 몇초 이상이 걸리는 연산이나 반복문이 있는 코드가 있다고 하자.

​

그러면 stack에서 그 몇초가 걸리는 연산을 진행하고 있을 때,

이벤트 발생이나 ajax 요청, setTimeout 코드 들이 진행이 안된다.

stack은 아직 연산 중이기 때문에(비어있지 않기 때문에),

버튼 동작이나 그런 것 들이 Queue에서 무한으로 대기 중일 것이다.

( 어? 왜 동작을 안하지..! 하고 당황하게 될 것. )

​

이러는 경우 종종 웹 브라우저에서 볼 수 있는 "응닶 없는 페이지" 의 원인이 되기도 한다.

​

응답 없는 페이지로 만들지 않으려면

Stack과 Queue를 바쁘지 않게 코드를 짜면 된다. (말은 쉽다)

 

​

[출처] 17. 자바스크립트(javascript) 동작원리(Stack, Queue, Event loop)|작성자 김쿠키