호이스팅 실행 컨텍스트 (Execution Context)

JavaScript에서 호이스팅과 실행 컨텍스트 (Execution Context)는 코드의 실행 순서와 변수/함수의 접근 가능성을 이해하는 데 매우 중요한 개념이다. 

 

1. 실행 컨텍스트 (Execution Context)

실행 컨텍스트는 JavaScript 코드가 실행될 때 만들어지는 환경을 의미한다. 모든 코드 실행에는 실행 컨텍스트가 생성된다.

1. 글로벌 실행 컨텍스트
   • 전역 코드(함수 바깥의 코드)가 실행될 때 생성된다.
   • 브라우저에서는 전역 객체 window가 실행 컨텍스트의 일부로 포함된다.
   • 전역 변수, 함수 선언, 그리고 전역 스코프를 관리한다.
2. 함수 실행 컨텍스트
   • 함수가 호출될 때마다 생성된다.
   • 함수 내부의 변수와 코드 실행을 관리한다.

각 실행 컨텍스트는 다음 세 가지 구성 요소로 이루어져 있다:

• Variable Environment: 선언된 변수와 함수의 정보를 저장.
• Lexical Environment: 변수와 외부 스코프의 참조를 포함.
• This Binding: 현재 실행 컨텍스트의 this 값을 저장.

---

2. 호이스팅 (Hoisting)

호이스팅은 변수와 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 JavaScript의 특성을 의미한다. 실제로는 코드 실행 이전에 변수와 함수의 선언이 메모리에 등록된다.

변수 호이스팅

 

console.log(hello); // undefined
var hello = "world";

var hello; // 선언이 호이스팅됨 (undefined로 초기화)
console.log(hello); // undefined
hello = "world"; // 할당

 

함수 호이스팅

함수 선언은 변수와 다르게, 전체 함수가 호이스팅된다:

j

test(); // "Function called!"
function test() {
  console.log("Function called!");
}​

위 코드에서 함수 test는 실행 전에 메모리에 저장되므로 호출이 가능

---

3. 글로벌 실행 컨텍스트 예제

test(); // "Function called!"
function test() {
  console.log("Function called!");
}

글로벌 실행 컨텍스트가 생성될 때:

1. Creation Phase (생성 단계)
   • 변수와 함수 선언이 처리되며, 변수는 undefined로 초기화된다.
   • 함수는 전체 함수 정의를 메모리에 저장한다.
   • 예제 코드의 초기 상태: 

   • GlobalExecutionContext = {
       VariableEnvironment: {
         hello: undefined,
         test: <ref to test function>
       },
       LexicalEnvironment: {
         hello: undefined,
         test: <ref to test function>
       },
       ThisBinding: <global object>
     };

2. Execution Phase (실행 단계)
   • 코드가 한 줄씩 실행되며 변수에 값이 할당된다.

GlobalExecutionContext = {
  VariableEnvironment: {
    hello: "world",
    test: <ref to test function>
  },
  LexicalEnvironment: {
    hello: "world",
    test: <ref to test function>
  },
  ThisBinding: <global object>
};

 

---

4. 요약

• 호이스팅: 변수는 선언만 호이스팅되어 undefined로 초기화되며, 함수 선언은 전체 함수가 호이스팅된다.
• 실행 컨텍스트: JavaScript가 코드를 실행하기 위해 생성하는 환경으로, 글로벌 및 함수 실행 컨텍스트가 존재한다.
• 글로벌 실행 컨텍스트: 전역 스코프의 변수, 함수, this를 관리하며, 전역 객체와 연결된다.

 

 

 

 

 

let과 const도 호이스팅이 된다. 그러나 var와는 동작 방식이 다른다. 주요 차이점은 Temporal Dead Zone(TDZ, 임시 사각지대)의 존재이다.

---

1. 호이스팅 동작 비교

var의 호이스팅:

• 변수가 선언 단계에서 초기화와 함께 호이스팅된다.
• 초기 값은 undefined로 설정된다.
• 즉, 변수를 선언하기 전에 접근이 가능하며 값은 undefined이다.

 

console.log(a); // undefined
var a = 10;
console.log(a); // 10

var a; // 선언이 호이스팅됨
console.log(a); // undefined
a = 10; // 할당
console.log(a); // 10

 

 

 

let과 const의 호이스팅:

• 변수의 선언만 호이스팅된다. 초기화는 실행 단계에서 이루어진다.
• 선언 이전에 변수에 접근하려고 하면 ReferenceError가 발생한다.
• 이는 Temporal Dead Zone(TDZ) 때문이다.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
console.log(b); // 10

 

// b는 선언되었지만 초기화되지 않은 상태로 TDZ에 있음
let b; // 선언이 호이스팅됨
console.log(b); // ReferenceError
b = 10; // 초기화 및 할당
console.log(b); // 10

 

 

 

2. const와 추가적인 제약

• const는 let과 동일하게 호이스팅되며 TDZ의 영향을 받는다.
• 하지만 초기화 없이 선언할 수 없으며, 반드시 선언과 동시에 값을 할당해야 한다.

console.log(c); // ReferenceError
const c = 20; 
console.log(c); // 20

 

 

 

다음은 불가능한 코드:

 

const d;
d = 20; // SyntaxError: Missing initializer in const declaration

 

 

3. 내부 동작 원리 (V8 내부 처리 기준)

V8 엔진에서 변수 선언과 할당은 다음과 같은 단계를 거친다.

var 처리:

1. VariableMode: kVar:
   • var 변수는 스코프에 등록되고 초기화(undefined)가 동시에 이루어진다.
2. AllocateTo:
   • 변수가 메모리 공간에 할당된다.
3. 초기화 및 사용 가능:
   • 선언과 초기화가 함께 처리되므로, 선언 이전에 접근하면 undefined를 반환한다.

let과 const 처리:

1. VariableMode: kLet / kConst:
   • 변수는 선언되지만 초기화되지 않다.
   • 이 상태에서는 Temporal Dead Zone(TDZ)에 위치하며, 선언된 블록 내부에서도 초기화 전에는 접근할 수 없다.
2. set_initializer_position:
   • 초기화가 명시적인 위치에서 설정된다. 초기화가 이루어진 이후에만 변수 사용이 가능한다.

---

4. Temporal Dead Zone (TDZ)

TDZ는 let과 const로 선언된 변수가 선언과 초기화 사이에 접근할 수 없는 상태를 의미한다.

예시:

{
  // TDZ 시작
  console.log(x); // ReferenceError
  let x = 5; // TDZ 종료
  console.log(x); // 5
}

 

 

이로 인해 let과 const는 선언 이전에 접근하려고 하면 ReferenceError가 발생한다.

---

5. 요약

• var: 선언과 초기화가 함께 호이스팅되며, 초기 값은 undefined로 설정된다.
• let과 const: 선언만 호이스팅되며 초기화는 실행 단계에서 이루어진다. 선언과 초기화 사이에 Temporal Dead Zone(TDZ)가 있어 초기화 이전에 접근하면 ReferenceError가 발생한다.
• const는 추가로 선언과 동시에 초기화가 필요하며, 초기화 이후 값 변경이 불가능하다.