[JS] 자바스크립트 동작 원리

Wonny·2022년 11월 14일
0
post-thumbnail

자바스크립트 언어

자바스크립트는 동시에 하나의 작업만을 처리할 수 있는 싱글 스레드 언어입니다.
정확하게 말하면 자바스크립트의 메인 스레드인 이벤트 루프가 싱글 스레드이기 때문에 자바스크립트를 싱글 스레드 언어라고 부릅니다. 하지만 이벤트 루프만 독립적으로 실행되지 않고 웹 브라우저나 NodeJS같은 멀티 스레드 환경에서 실행됩니다.
즉, 자바스크립트 자체는 싱글 스레드가 맞지만 자바스크립트 런타임은 싱글 쓰레드가 아닙니다.

자바스크립트 엔진

  • 메모리 힙(Memory Heap) — 객체는 힙, 대부분 구조화되지 않은 메모리 영역에 할당된다. 변수와 객체에 대한 모든 메모리 할당은 여기서 발생한다.
  • 호출 스택(Call Stack) — 코드가 실행될 때 호출 스택이 쌓인다.

자바스크립트 런타임

자바스크립트가 실행될 때는 다음과 같은 요소들이 실행을 도와줍니다.

  • Call Stack: 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리
  • Web API: 웹 브라우저에서 제공하는 API로 AJAX나 Timeout등의 비동기 작업을 실행
  • Task Queue: Callback Queue라고도 하며 Web API에서 넘겨받은 Callback함수를 저장
  • Event Loop: Call Stack이 비어있다면 Task Queue의 작업을 Call Stack으로 옮김

Call Stack

콜스택은 함수를 호출 하기 위한 정보를 담는 구조입니다. 이때, Javascript 는 단일 호출 스택(call stack)을 가집니다.
단일 스택을 가지고 있다는 것은 한번에 하나의 task 만 처리할 수 있다는 의미입ㅣ다.
스택이라는 이름에서도 알수 있듯이 콜스택은 LIFO(Last In First Out)로 마지막에 들어온 데이터가 먼저 나갑니다.

setTimeout(() => {
  console.log(1)
}, 0)
for (let i = 0; i < 1000; i += 1) {
  console.log(2)
}

// (1000) 2
// 1

위의 코드가 주어졌을 때, 비동기가 처리되는 과정을 살펴봅시다.
console.log(2) 가 호출 스택에 쌓입니다.
그리고 버튼 클릭과 같은 이벤트가 발생하면 DOM 이벤트, http 요청, setTimeout 등과 같은 비동기 함수는 C++로 구현된 web API를 호출하며, web API는 콜백 함수를 이벤트 큐(콜백 큐)에 밀어 넣습니다.
즉, console.log(1)는 이벤트 큐에 들어가고 대기하다가 스택이 텅 비는 시점에 이벤트 루프를 돌리게 됩니다(스택에 넣음).

따라서 0초 뒤에 실행함에도 불구하고, console.log(2)가 먼저 호출 되고 그 후에 console.log(1)이 실행됩니다.

이벤트 루프의 기본 역할은 큐와 스택, 두 부분을 지켜보다가 스택이 비는 시점에 콜백을 실행시켜 주는 것으로 각 메시지와 콜백은 다른 메시지가 처리되기 전에 완전히 처리됩니다.

profile
프론트엔드 개발자를 꿈꾸며

0개의 댓글