[Javascript] 자바스크립트의 동작방식 - 싱글스레드와 비동기

서론

자바스크립트는 싱글스레드 방식으로, 한번에 하나의 작업만 처리가 가능하다.

하지만 자바스크립트를 사용해 만들어진 웹사이트들은 버튼 클릭, HTTP 요청 전송 등의 작업을 한번에 처리한다.

싱글 스레드인데 어떻게 여러 작업을 동시에 처리 ( 비동기 처리 ) 를 하는 것일까?

---

자바스크립트의 동작방식

아래 코드 예시를 보자.

한번에 한 줄 씩 코드를 수행한다고 했을 때, setTimeout 의 두 번째 인자로 0ms 를 넣어주었으므로 바로 콘솔에 2를 찍어주야 할 것 같다.

그런데, 결과값은 1 -> 3 -> 2 가 찍힌다. 왜 그럴까?

 

자바스크립트 코드를 실행해주는 엔진은 웹 브라우저이다. ( 크롬, 사파리, 익스플로러 등 )

웹 브라우저에서 자바스크립트가 어떻게 동작하냐면..

자바스크립트 동작방식

일단 자바스크립트 엔진에는 heap 과 stack 이라는 공간이 있다.

자바스크립트 코드 한줄 한줄이 stack 이라는 공간에 쌓이면서 한 줄씩 순차적으로 실행이 된다.

heap 이라는 공간은 참조형 타입 변수들의 값을 저장하는 공간이라고 보면 된다. ( 객체, 배열 등 )

 

실제로 자바스크립트 코드를 실행해주는 공간인 stack 은 하나밖에 없고, 따라서 한번에 코드 한줄만 실행 가능하다 ( Single Threaded )

그런데 stack 에 잠깐 기다렸다 실행해야 하는 setTimeout() 이나 서버의 응답을 기다려야 하는 ajax 같은 코드가 있는 경우,

stack 에서 처리를 위해 대기하지 않고 Web API 로 치워버린다.

그리고 다음 자바스크립트 코드를 바로 수행한다.

 

Web API 로 이동된 코드들은, 처리 ( 몇 초 대기하거나 서버로부터 응답을 받는 것 등 )가 끝나면  callback queue 라는 공간으로 이동하게 된다.

여기서 event loop 가 돌면서 stack 이 비어있고 callback queue 에 대기 중인 코드가 있는 경우,

대기 중인 코드들을 stack 에 하나씩 올려서 수행시킨다.

 

위의 예시에서 콘솔에 2가 가장 마지막으로 찍힌 이유도, setTimeout() 함수를 통해 코드가 수행되었기 때문이다.

---

정리

자바스크립트는 웹 브라우저에서 call stack 에 쌓이면서 한 줄 씩 수행된다.

수행되면서 대기가 필요한 코드 ( setTimeout(), eventListener, ajax 등 ) 가 존재할 경우 Web API 에게 해당 코드를 던지고 

바로 수행 가능한 다음 코드를 수행한다.

Web API 는 처리가 완료된 코드를 callback queue 에 담고, callback queue 에 있는 코드들은 event loop 가 돌면서 stack 이 비어있을 때 하나씩 stack 에 올라가서 수행된다.

 

즉, 자바스크립트는 원래 동기적으로 처리된다. ( 한 번에 한 줄씩 순서대로 )

하지만 특정 함수 ( setTimeout(), eventListenr, ajax ) 들은 Web API 를 통한 비동기적 처리가 가능하다!

---

참고

JS가 싱글스레드임에도 비동기 처리가 가능한 이유

[JavaScript] JS가 싱글스레드임에도 비동기 처리가 가능한 이유