[Deep Dive CS - Q17,Q18] Hoisting & Execution Context

Q17. (실행 컨텍스트 라이프사이클) 자바스크립트 엔진이 코드를 실행하기 전 '생성 단계(Creation Phase)'와 '실행 단계(Execution Phase)'에서 각각 어떤 일을 하는지, var, let, function을 예로 들어 설명해주세요.

 

[변수의 생명주기]
1. 선언 (Declaration) : 스코프에 변수명을 등록. 
2. 초기화(inintialization) : 메모리를 확보하고 undefined를 넣음. 
3. 할당(Assignment) : 실제 값을 넣음

- var : 선언 + 초기화가 한 방에 일어남. 
- let : 선언과 초기화가 분리됨(그 사이가 TDZ)
- const : 선언과 초기화가 분리됨(그 사이가 TDZ) 단, 초기화와 할당이 반드시 동시에 일어나야 함. 
- function : 선언 + 초기화+할당이 한방에 일어남

 

[실행 컨텍스트 단계]
1. 생성 단계 (Creation Phase) : 코드를 실행하기 전 스캔하는 단계.
- 렉시컬환경(Lexical Environment)을 구성합니다. 
- 함수 선언문 : 식별자를 등록하고 함수 객체를 즉시 할당합니다. 
- (완전한 호이스팅)var 변수 : 식별자를 등록하고 undefined로 초기화합니다. 
- let/const 변수: 식별자를 등록하지만 초기화하지 않습니다. (TDZ 진입)

2. 실행단계(Execution Phase)
- 코드를 한 줄식 읽으며 실행합니다. 
- 변수에 실제 값을 할당하고 함수를 호출합니다. 
- let 선언문을 만나면 그때 초기화가 이루어지고 TDZ가 해제 됩니다. 

 

 

Q18. 아래 코드에서 (A), (B), (C) 의 출력 결과를 예상하고 이유를 설명해주세요.

var x = "Global X";
let y = "Global Y";

function testScope() {
  console.log(x); // (A)
  console.log(y); // (B)

  var x = "Local X";
  let y = "Local Y";
  
  {
      console.log(x); // (C)
      let x = "Block X";
  }
}

testScope();

 

• (A): undefined
• (B): ReferenceError: Cannot access 'y' before initialization
• (C): ReferenceError: Cannot access 'x' before initialization

[해설]

• (A) var x: 함수 testScope 내부 최상단으로 x가 호이스팅 되면서 undefined로 초기화됩니다. 
• (B) let y: 함수 내부의 let y도 호이스팅은 되지만, 초기화되지 않은 상태(TDZ)입니다. 전역 y를 쓰지 않고, 내부에 선언될 y를 바라보므로 에러가 납니다.
• (C) 블록 안의 x: var는 함수 스코프지만, let은 블록 스코프입니다. 블록 { ... } 안에서 let x가 선언되었으므로, 블록 시작부터 선언 라인까지는 x의 TDZ입니다. 바깥의 var x("Local X")에 접근할 수 없습니다.