Hoisting(호이스팅)

자바스크립트 엔진이 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

즉, 코드가 실행하기 전 변수선언/함수선언 이 해당 스코프의 최상단으로 끌어 올려지는 것같은 현상을 말합니다.

• 호이스팅은 스코드 단위로 발생 합니다.

 

environmentRecord 과 hoisting의 연관

• environmentRecord 는 실행 컨텍스트 객체는 활성화되는 시점에 VariableEnvironment, LexicalEnviornment 환경에 속합니다.
• environmentRecord 는 변수명만 끌어올리고 할당 과정은 그대로 남겨두게 됩니다.
• environmentRecord 는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장 됩니다.
  • 매개변수 식별자
  • 함수 자체
  • 함수 내부의 식별자

 

hoisting 과 var, let, const

// 호이스팅 때문에 선언이 끌어올려져서 오류 안남.
console.log(text); // (선언 + 초기화 된 상태)
text = 'Hanamon!'; // (선언 + 초기화 + 할당 된 상태)
var text;
console.log(text);

// 호이스팅 때문에 선언이 끌어올려졌지만 초기화 안된 상태에서 참조해서 오류 남.
console.log(text); // (선언 된 상태, 초기화(메모리 공간 확보와 undefined로 초기화) 안되서 참조 불가능 -> 에러남)
let text; // 여기서 초기화 단계가 실행됨


const text; // 에러남. 주의! 애초에 const 키워드로 재할당 불가능! 그래서 선언과 동시에 할당해야함

• var는 선언하기 전에 사용할 수 있습니다.
• let, const 모두 호이스팅이 일어납니다. -> 하지만 이 둘은 TDZ(Temporal Dead Zone)에 영향을 받습니다.
• TDZ 영역에 있는 변수들은 사용할 수 없습니다. -> 할당을 하기 전에는 사용할 수 없습니다.

// 정상적인 코드
let age = 30;

function showAge(){
    console.log(age);
}

showAge();

// 문제가 발생하는 코드
let age = 30;

function showAge(){
    console.log(age); // TDZ 구역 : 스코프의 시작 지점부터 초기화 시작 지점까지의 구간

    let age = 20;
}

showAge();

 

변수의 생성과정과 연관 ?

var

1. 선언 및 초기화 단계
2. 할당 단계

• var 키워드로 선언한 변수는 선언 단계와 초기화 단계가 한번에 이루어집니다.
• 즉, 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화 합니다.
• 따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않습니다.

 

let

1. 선언 단계
2. 초기화 단계
3. 할당 단계

• let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행 됩니다.
• 변수를 등록(선언 단계)하지만 초기화 단계는 변수 선언문에 도달했을 때(코드 실행 후) 이루어집니다.
• 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생 합니다. -> 이는 아직 변수가 초기화되지 않았기 때문이다.
• 즉, 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문입니다.
• 따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다.
• 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부릅니다.

 

함수(function) 또한 호이스팅이 일어난다.

foo1(); // 함수 선언문에서는 호이스팅 일어난다.
foo2(); // 함수 표현식이라서 호이스팅 안된다.
function foo1() {
  console.log('Hello');
}
var foo2 = function() {
  console.log('world');
}

< JavaScript의 let과 const, 그리고 TDZ ⛔️ >

호이스팅은 var만 가능하다, 호이스팅은 스코프의 최상단으로 끌어올려져 변수를 참조 가능하다라고 알고 있었습니다. 하지만 호이스팅은 let, const 도 해당됩니다.  자바스크립트 엔진은 코드를 실행하기 전에 코드 실행에 필요한 모든 정보들을 수집하는 단계, 즉 실행컨텍스트를 생성하는 단계를 진행합니다. 수집하는 정보 중 하나가 변수 객체고 이 변수 객체에 스코프에 선언된 변수들을 담아둡니다. 여기서 '변수 선언'의 의미가 분명하게 들어납니다. 변수 선언은 'const, let, var 키워드와 변수를 작성한 것' 처럼 단순한 의미가 아니라 변수 객체에 담는다는 의미입니다. 이 과정이 호이스팅입니다.

그러면 왜 const, let은 스코프안에서 선언부 코드 이전에 접근하면 reference error를 내고 var는 그렇지 않을까요? 주의할 점은 선언이 곧 메모리 주소가 생겼다는 의미가 아니라는 점입니다. '변수 초기화'에서 메모리 주소가 생깁니다.   var는 호이스팅 후 곧바로 undefined 값으로 초기화되지만 let과 const는 그렇지 않습니다. 그래서 var는 메모리 주소가 있으니 선언부 코드 전에  접근이 가능하고 let, const는 메모리 주소가 없어서 reference error가 나는 겁니다.

TDZ(Temporal Dead Zone)는 변수가 선언된 스코프 내에서 선언부 코드에 닿기 전까지의 코드 라인들로, 여기서 변수를 참조할 때 에러가 발생하는 개념적인 공간입니다. 위에 설명한 것과 연관지으면 let과 const는 호이스팅되지만 초기화가 이뤄지지 않아 TDZ에 영향을 받는다로 결론을 지을 수 있습니다.

참고

• 코딩앙마
• 호이스팅이란
• 실행_컨텍스트_구성
• https://taenami.tistory.com/109