자바스크립트는 싱글 스레드이자 논-블로킹

싱글 스레드는 하나의 힙 영역과 하나의 콜 스택을 가진다. 하나의 콜 스택을 가진다는 의미는 한 번에 한 가지 일 밖에 하지 못한다는 의미이다.
예를 들어 네트워크 요청을 한다면, 응답이 올 때까지 다른 일은 하지 못하고 마냥 기다릴 수밖에 없다. 이것이 문제되는 이유는 웹 브라우저에서 코드가 실행되는데, 코드가 종료될 때까지 유저가 클릭을 해도 어떠한 반응을 하지 않는 상태가 된다. 사용자에게 원활한 UI를 제공해야 한다면, 콜 스택이 멈추게 해서는 안 된다. 콜 스택이 멈춘 상황을 블로킹 상태라고 한다.
논 블로킹은 즉, 비동기 콜백을 사용하는 것이다.

자바스크립트 엔진

자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다. 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다.
자바스크립트 엔진의 대표적인 예시로는 구글의 V8 엔진이 있다. 파이어폭스의 SpiderMonkey, 사파리의 Webkit 등이 있지만, 크롬에서 사용하는 V8이 가장 대중적으로 알려져 있다.
자바스크립트 엔진의 주요 구성요소로는 메모리 힙(Memory Heap)과 콜 스택(Call stack)이 있다.

• 콜 스택 -> 코드 실행에 따라 호출 스택이 쌓이는 곳, 콜 스택은 함수가 실행되는 순서를 기억한다. 함수를 실행하려면 스택의 가장 위에 해당 함수를 넣게 되고, 함수에서 리턴이 일어나면 스택의 가장 위쪽에서 함수를 꺼낸다.

  • 코드를 읽어내려가면서 수행할 작업들을 밑에서부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것들을 찾아서 작업을 수행하는 공간
  • 기본적으로 프로그램 상에서 어디에 있는지를 기록하는 자료구조
  • 자바스크립트는 싱글스레드다. 그렇기 때문에 호출 스택이 하나이다. 따라서 한 번에 하나의 작업만 처리할 수 있다.
  • 호출 스택의 각 단계를 스택 프레임(Stack Frame)이라고 한다.
  • 호출 스택의 크기는 정해져있고, 만약 그 크기를 초과한다면 에러가 발생한다(Maximum call stack size)

• 메모리 힙 -> 메모리 할당이 일어나는 곳

  • 변수 선언, 함수 저장, 호출 등의 작업이 발생하는 공간
  • 예를들어 const num = 1 라는 코드는 num이라는 변수를 위해 메모리 공간을 할당하고, 그 공간에 1이라는 값을 할당

런타임

앞서 설명한 것처럼 자바스크립트 엔진은 싱글 스레드 기반 언어이기 때문에, 다른 작업을 수행하려면 현재 수행중인 작업이 끝날때까지 기다려야 하는 문제점이 있었다. 또한, 많은 시간이 걸리는 작업을 수행하게 된다면 프로그램이 엄청나게 느려질 우려 역시 존재했다.

그렇기 때문에, 오랜 시간이 걸리는 작업들은 백그라운드에서 처리하고 간단하게 처리할 수 있는 작업들만 콜 스택에서 처리한다면 효율적으로 처리가 가능하였다. 이러한 과정들이 가능하게 해준 것이 바로 자바스크립트 런타임이다.

• 런타임이란, 프로그래밍 언어가 구동되는 환경을 말한다.
• JavaScript 런타임이란 JavaScript가 구동되는 환경을 말한다.
• 이러한 JavaScript 런타임의 종류로는 웹 브라우저(크롬, 파이어폭스 등)프로그램과 NodeJS라는 프로그램이 있다.
• 이러한 프로그램들에서 JavaScript가 구동되기 때문에 JavaScript 런타임이라고 한다.
• 자바스크립트 런타임은 여러 개의 스레드가 사용되며, 즉 멀티 스레드를 지원한다.
• Web API
  1. Web API란, Ajax 요청, setTimeout(), 이벤트 핸들러의 등록과 같이 웹 브라우저에서 제공하는 기능들을 말한다.
  2. setTimeout()의 경우, 동작하는 최소 시간을 보장한다. 확히 얼마 후 동작하겠다는 의미가 아니라 얼마 후 동작하는 최소 시간을 보장한다는 의미가 더 정확하다. 왜냐하면 정해진 시간 후 콜백이 콜백 큐에 쌓이는데, 콜백 큐에 쌓인 콜백이 콜 스택에 들어오기 위해서는 콜 스택이 비어 있어야 하기 때문
• Callback queue : 콜백 함수들이 대기하는 곳(FIFO 선입선출)
• Event Loop : call stack이 비워질 때마다 callback queue에 대기 중인 콜백함수가 있다면, callback 함수를 call stack에 보내줌, 자바스크립트 엔진과 상호 연동하기 위해 사용하는 장치
  1. 싱글 스레드의 한계를 보완하기 위해 비동기 콜백(asynchronous callback)을 이용
  2. 비동기 콜백에는 Web APIs, ES6의 Promise가 있다.
  3. 자바스크립트 코드 실행 중에 이벤트를 만나면 이벤트가 콜백 큐에 차례대로 쌓인다. 콜백 큐는 FIFO 선입선출 룰을 따른다.
  4. 이벤트 루프는 콜 스택이 비었는지 확인하고, 비었으면 콜백 큐에 있는 이벤트를 가져다 콜 스택에 밀어넣는다. 이 한 번의 작업을 틱(tick) 이라고 한다. 이벤트 루프는 이 작업은 반복(loop)한다.

결론

자바스크립트는 싱글 스레드 방식으로 동작한다. 하지만 싱글 스레드 방식으로 동작하는 것은 브라우저가 아니라 브라우저에 내장된 자바스크립트 엔진일 뿐이고, 만약 모든 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로 동작한다면 자바스크립트는 비동기로 동작할 수 없으며 프로그램의 처리 속도와 무게가 효율적으로 진행되지 않을 것이다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작하며, 이는 Web API, Callback Queue, Event Loop에 의해 가능하다.