실행컨텍스트와 호이스팅

실행 컨텍스트(Execution Context)란?

실행 컨텍스트는 JavaScript 코드가 실행되는 환경입니다.
코드가 실행될 때 변수, 함수, 객체가 어떻게 메모리에 할당되고, 그 순서는 어떻게 되는지를 결정하는 것이 실행 컨텍스트입니다.

실행 컨텍스트의 종류

JavaScript에는 두 가지 주요 실행 컨텍스트가 있습니다.

• 글로벌 실행 컨텍스트(Global Execution Context): 자바스크립트가 처음 시작될 때 생성되는 전역 컨텍스트입니다. 브라우저에서는 window 객체가 글로벌 실행 컨텍스트의 일부입니다.
• 함수 실행 컨텍스트(Function Execution Context): 함수가 호출될 때마다 생성되며, 각 함수는 고유한 실행 컨텍스트를 가집니다.

실행 컨텍스트 생성 단계

실행 컨텍스트는 코드가 실행될 때 두 가지 단계를 거칩니다:

1. 생성 단계(Creation Phase):
   메모리 공간이 할당되며, 변수와 함수 선언이 먼저 등록됩니다.
   이때 호이스팅이 발생하여 변수가 "undefined"로 초기화되거나, 함수는 완전히 메모리에 할당됩니다.
2. 실행 단계(Execution Phase):
   실제 코드가 한 줄씩 실행되며, 변수에 값이 할당되고 함수가 실행됩니다.

실행 켄텍스트의 구성 요소

각 실행 컨텍스트는 다음과 같은 3가지 구성 요소로 이루어집니다:

• 변수 객체(Variable Object): 함수 선언, 변수 선언(hoisting 포함), 매개변수 등을 저장합니다.
• 스코프 체인(Scope Chain): 해당 컨텍스트와 외부 컨텍스트의 스코프를 참조합니다. 이를 통해 함수 내에서 외부 변수에 접근할 수 있습니다.
• this 바인딩: 현재 실행 중인 코드에서 this가 가리키는 객체를 나타냅니다.

실행 컨텍스트 예시

console.log(x); // undefined
var x = 5;

function foo() {
    console.log(y); // undefined
    var y = 10;
    bar();

    function bar() {
        console.log("This is bar");
    }
}

foo();
console.log(z); // ReferenceError: z is not defined

실행 흐름

1. 전역 실행 컨텍스트가 생성되며, x와 foo 함수 선언이 메모리에 할당 됩니다. 이때 x는 undefined로 초기화됩니다.
2. console.log(x)가 실행되며 undefined 출력
3. x = 5가 실행되어 x에 5가 할당됩니다.
4. foo()함수가 호출되면, 함수 실행 컨텍스트가 생성됩니다.
   • y는 undefined로 초기화됩니다.
   • bar()함수는 완전히 메모리에 저장됩니다.
5. console.log(y)가 실행되며 undefined 출력.
6. y = 10이 실행되어 y에 10이 할당됩니다.
7. bar() 함수가 호출되어 This is bar가 출력됩니다.
8. console.log(z)에서 z는 선언되지 않았으므로 ReferenceError가 발생합니다.

정리

• 실행 컨텍스트는 코드가 실행되는 환경이며, 각 실행 컨텍스트는 변수 객체, 스코프 체인, this 바인딩으로 구성됩니다.
• 호이스팅은 변수와 함수 선언이 실행 전에 메모리에 미리 할당되는 동작을 의미합니다.
  • var로 선언된 변수는 undefined로 초기화되며, let과 const는 호이스팅되지만 초기화되지 않고 일시적 사각지대 (TDZ)에 놓입니다.
  • 함수 선언은 완전히 호이스팅되며, 함수 표현식은 변수 호이스팅과 동일한 동작을 합니다.