JavaScript 실행 컨텍스트와 콜 스택 설명

Source: Dev.to

실행 컨텍스트란?

실행 컨텍스트는 JavaScript 코드가 평가되고 실행되는 환경을 말합니다.
JavaScript 엔진이 코드를 실행할 때마다 생성되는 컨테이너라고 생각하면 됩니다. JavaScript의 모든 코드는 실행 컨텍스트 안에서 동작합니다.

실행 컨텍스트는 두 단계로 생성됩니다:

1. 메모리 생성 단계
2. 코드 실행 단계

메모리 생성 단계

• 모든 변수와 함수가 코드가 실행되기 전에 메모리에 할당됩니다.
• 변수는 undefined 값으로 저장됩니다.
• 함수는 전체 정의 형태로 저장됩니다.
• 메모리 구성 요소는 이러한 항목들을 키‑값 쌍으로 보관합니다.

코드 실행 단계

• 엔진이 코드를 한 줄씩 실행합니다.
• 변수 값이 실제 코드에서 지정된 값으로 업데이트됩니다.
• 함수가 호출/실행됩니다.
• 각 함수 호출은 콜 스택(또는 실행 스레드라 부름)에 푸시됩니다.

이 때문에 JavaScript는 동기식 싱글 스레드 언어라고 설명됩니다: 정의된 순서대로 한 번에 한 줄씩 실행됩니다.

실행 컨텍스트의 종류

전역 실행 컨텍스트

• JavaScript 파일이 처음 실행될 때 한 번 생성됩니다.
• 스크립트당 전역 컨텍스트는 하나만 존재합니다.

함수 실행 컨텍스트

• 함수가 호출될 때마다 생성됩니다.
• 활성화된 함수 호출 수만큼 여러 컨텍스트가 동시에 존재할 수 있습니다.

예제 walkthrough

let n = 5;

function multiplyByTwo(x) {
  return x * 2;
}

let output1 = multiplyByTwo(n);
let output2 = multiplyByTwo(output1);

1. 메모리 생성 단계

   • n은 undefined 값으로 저장됩니다.
   • multiplyByTwo는 함수 객체로 저장됩니다.

2. 코드 실행 단계

   • n에 값 5가 할당됩니다.
   • multiplyByTwo(n)이 호출됨 → 새로운 함수 실행 컨텍스트가 생성되어 콜 스택에 푸시됩니다.
   • 함수가 반환되면 해당 컨텍스트가 스택에서 팝되고 output1에 결과가 저장됩니다.
   • output2에 대해서도 동일한 과정이 반복됩니다.

콜 스택

콜 스택은 LIFO(Last‑In, First‑Out) 구조로, 활성화된 실행 컨텍스트를 추적합니다.

실행 순서

1. 전역 컨텍스트 – 가장 먼저 생성됩니다.
2. first() – 해당 컨텍스트가 스택에 푸시됩니다.
3. second() – first() 안에서 호출되어 스택에 푸시됩니다.
4. third() – second() 안에서 호출되어 스택에 푸시됩니다.

third()가 끝나면 스택에서 팝되고, 이어서 second()와 first()가 팝되어 전역 컨텍스트로 제어가 돌아갑니다.

실행 컨텍스트를 이해해야 하는 이유

• 호이스팅 동작을 예측할 수 있습니다.
• 스코프 문제를 디버깅할 수 있습니다.
• 클로저를 파악할 수 있습니다.
• 콜 스택 오버플로우를 방지할 수 있습니다.
• 더 나은 비동기 코드를 작성할 수 있습니다.

결론

실행 컨텍스트와 콜 스택은 JavaScript의 기본 토대입니다. 이를 마스터하면:

• 클로저가 논리적으로 이해됩니다.
• 비동기 동작이 의미 있게 다가옵니다.
• 디버깅이 훨씬 쉬워집니다.