자바스크립트 엔진은 코드를 실행하면 우선 전역 실행 컨텍스트 한 칸을 생성해서 Call Stack에 넣습니다. 그 후, 전체 코드를 스캔하면서 선언할게 있는지 찾아보고, 있다면 먼서 선언해둡니다.

선언하는 과정에서 생성해둔 실행 컨텍스트 안에 있는 환경레코드 에 새로운 식별자를 기록합니다.

이렇게 본격적인 실행에 앞서 스캔하고 준비하는 단계를 생성 단계라고 합니다.

그리고 이어서 선언문 외에 나머지 코드를 순차적으로 실행하는데 이 단계를 실행 단계 라고 합니다. 필요한 경우 생성 단계에서 환경레코드에 기록해둔 정보를 참고하거나 업데이트 하게 됩니다.

• 생성 단계 (Creation Phase)
  • Execution Context 생성
  • 선언문만 실행해서 Environment Record (환경 레코드) 에 기록 → 호이스팅의 원인
• 실행 단계 (Execution Phase)
  • 선언문 외 나머지 코드 순차적 실행
  • Environment Record (환경 레코드) 참조하거나 업데이트

선언과 초기화

• 선언 (Declaration) : 메모리 공간을 확보하고 식별자와 연결.

  // 실행 컨텍스트
  { MyVariable             }
  

• 초기화 (Initialization) : 식별자에 암묵적으로 undefined 값 바인딩.

  // 실행 컨텍스트
  { MyVariable : undefined }
  

var 와 let, const 의 차이

• var 는 한번 선언된 변수를 다시 선언할 수 있다. 즉 var 는 변수 중복 선언이 가능하지만, let, const 는 변수 중복 선언이 불가능하다.
• var 는 호이스팅이 일어나면 해당 스코프 내부의 변수 선언/함수 선언은 해당 스코프 최상단에 선언된 것 처럼 보인다 (변수: undefined 출력 / 함수: f{} 출력), 그런데 let과 const 는 var 처럼 동작하지 않고 Error를 내는 이유는 변수의 생성과정이 다르기 때문입니다.

변수의 생성과정(var, let, const)

• var variables lifecycle

  Level _1 : 선언 및 초기화

  • — TDZ —

  Level_2 : (생략)

  Level_3 : 할당

• let variables lifecycle

  Level_1 : 선언

  • — TDZ —

  Level_2 : 초기화

  Level_3 : 할당