[JavaScript] 실행 컨텍스트

HyeonE·2025년 5월 27일

JS

목록 보기
12/17
post-thumbnail

실행 컨텍스트란?

자바스크립트 코드가 실행되는 환경을 의미합니다.
변수, 함수, 객체 등의 정보를 담고, 코드가 어떻게 실행될지 컨트롤하는 핵심 메커니즘입니다.


📌 실행 컨텍스트의 생성 시점과 구성

실행 컨텍스트는 다음 세 단계를 거쳐 생성됩니다:

1. 실행 컨텍스트 생성 단계

  • 자바스크립트 엔진은 코드를 만나면 먼저 실행 컨텍스트를 생성합니다.
  • 실행 컨텍스트는 콜 스택(Call Stack)에 쌓입니다.

2. 실행 컨텍스트 구성 요소

  • VariableEnvironment (변수 환경)
    초기 변수 등록, 함수 선언 등이 저장됨 (var, function)
  • LexicalEnvironment (렉시컬 환경)
    식별자(변수/함수)의 스코프 정보를 저장
  • ThisBinding
    현재 컨텍스트에서의 this가 가리키는 값

📌 실행 컨텍스트의 종류

유형설명
글로벌 실행 컨텍스트가장 먼저 생성되며 전역 객체(window, global)와 연결됨
함수 실행 컨텍스트함수가 호출될 때마다 새로운 컨텍스트가 생성됨
Eval 실행 컨텍스트eval() 함수가 실행될 때 생성되지만, 사용은 권장되지 않음

📌 실행 컨텍스트와 콜 스택(Stack)

자바스크립트는 싱글 스레드 기반 언어입니다.
실행 컨텍스트는 LIFO(후입선출) 방식의 콜 스택에 의해 관리됩니다.

function one() {
  function two() {
    console.log("Hello");
  }
  two();
}
one();

콜 스택 변화:
1. global() → one() → two()
2. console.log() 실행
3. two() → one() → global() 순으로 제거


📌 실행 컨텍스트 vs 스코프 vs 호이스팅

개념설명
실행 컨텍스트실행 시점에 필요한 환경(Context) 구성
스코프변수가 유효한 범위
호이스팅변수/함수 선언이 코드 상단으로 끌어올려지는 현상

📝 Point

  • 실행 컨텍스트는 코드 실행 전 환경을 구성하고, 이 환경이 모여 JS의 실행 흐름을 만든다.
  • 콜 스택을 통해 순차적으로 함수가 실행되고 제거됨
  • LexicalEnvironment는 클로저, 스코프 체인, this 바인딩 등에 매우 중요한 요소
profile
프론트엔드 개발자가 되고싶은 대학생

0개의 댓글