실행 컨텍스트

Source: Dev.to

Execution Context를 주방에 비유해 보세요.
코드를 실행(요리)하기 전에 작업 공간, 도구(변수), 그리고 레시피(함수)가 필요합니다. 따라서 여기서 Execution Context는 준비 단계, 즉 “설정(set‑up)”이라고 할 수 있습니다.

Global Execution Context (GEC)

• 이것이 기본 상자입니다.
• 코드가 함수 안에 있지 않다면, 바로 여기서 실행됩니다.
• GEC는 자동으로 두 가지를 생성합니다: window 객체(브라우저 환경)와 특수 키워드 this.

Functional Execution Context (FEC)

• 함수를 호출할 때마다 JavaScript는 해당 함수 전용의 작은 새 상자를 만듭니다.
• 이 상자 안에는 그 함수에 특화된 변수와 로직이 저장됩니다.

The Two Phases (The “Magic” Trick)

JavaScript는 코드를 위에서 아래로 한 줄씩 읽고 바로 실행하는 것이 아니라, 당신의 “상자” 안에서 두 번의 과정을 즉시 수행합니다.

Fase A: Penciptaan (Alokasi Memori)

• 전역 객체(window)를 생성합니다.
• 변수와 함수용 메모리 공간을 마련합니다.
• Hoisting: 변수 선언은 undefined로 초기화되고, 모든 함수 선언은 메모리에 저장됩니다.

Fase B: Eksekusi

• JavaScript는 single‑threaded(한 번에 하나의 작업만 수행) 특성 때문에 Call Stack을 사용해 현재 어떤 “상자”가 작업 중인지 추적합니다.
• 프링글스 칩을 쌓아 올린 것을 떠올려 보세요:
  • Global Context가 가장 아래에 놓인 칩입니다.
  • functionA()를 호출하면 새로운 칩(Context A)이 그 위에 놓입니다.
  • functionA가 functionB를 호출하면 Context B가 Context A 위에 놓입니다.
  • functionB가 끝나면 그 칩이 스택에서 “팝(popped)”되어 사라지고, 제어가 다시 Context A로 돌아갑니다.