런타임(브라우저 또는 Node.js) 환경

1. 자바스크립트 특징

자바스크립트 엔진은 웹 브라우저나 Node.js 환경에서 자바스크립트 코드를 실행하는 핵심 프로그램으로, 마치 컴퓨터의 두뇌와 같습니다. 이 엔진은 메모리 힙과 호출 스택이라는 두 가지 중요한 부분으로 나뉘어 작동합니다.

메모리 힙은 프로그램 실행에 필요한 모든 데이터를 저장하는 창고 역할을 하며, 호출 스택은 현재 실행 중인 함수 목록과 순서를 관리하는 역할을 합니다.

자바스크립트는 한 번에 한 가지 일만 하는 싱글 스레드 방식으로 작동합니다. 마치 코드 들이 한 줄로 서서 기다리는 것과 같습니다. 하지만 오래 걸리는 작업은 따로 처리하고 다른 일을 먼저 할 수 있습니다. 이걸 비동기 처리라고 하며, 비동기 처리를 통해 여러 작업을 동시에 처리할 수 있습니다.

즉, 자바스크립트 엔진은 메모리 힙에 데이터를 저장하고, 호출 스택을 통해 함수의 실행 순서를 관리하며, 단일 스레드 환경에서도 비동기 처리를 통해 효율적으로 작업을 처리합니다.

2. 런타임

자바스크립트 엔진은 기본적으로 단일 스레드에서 작동하며, 요청이 들어온 순서대로 한 가지 작업만 처리합니다. 하지만 setTimeout과 같은 비동기 함수는 타이머가 완료된 후 콜백 함수를 실행해야 합니다.

브라우저 환경을 예로 들어 setTimeout을 살펴보겠습니다.

1. Web API 호출: setTimeout 함수가 호출되면 자바스크립트 엔진은 이 요청을 Web API로 넘깁니다.
2. Call Stack에서 제거: setTimeout 함수는 Call Stack에서 즉시 제거됩니다. 즉, 자바스크립트 엔진은 다른 작업을 처리할 수 있게 됩니다.
3. Web API에서 타이머 작동: Web API는 setTimeout에 지정된 시간만큼 기다린 후, 콜백 함수를 Callback Queue에 넣습니다.
4. Event Loop의 감시: Event Loop는 Call Stack이 비어있는지 지속적으로 확인합니다.
5. Callback Queue에서 Call Stack으로: Call Stack이 비어있다면 Event Loop는 Callback Queue에서 대기 중인 콜백 함수를 순서대로 Call Stack으로 옮겨 실행합니다.

3. 런타임 예시

1// 1번
2let num = 1;
3
4// 2번
5setTimeout(() => {
6  num = 2;
7}, 0);
8
9// 3번
10num = 3;
11
12// 4번
13console.log(num);

코드 분석

1. 1번: num 변수에 1이 할당됩니다.
2. 2번: setTimeout 함수가 호출됩니다. 이 함수는 0ms 후에 num 변수를 2로 변경하는 작업을 예약합니다.
3. 3번: num 변수에 3이 다시 할당됩니다.
4. 4번: console.log(num)이 실행됩니다. 이 시점에서 num의 값은 3이므로 3이 콘솔에 출력됩니다.