호이스팅과 TDZ

삽질 저장소·2022년 7월 21일
0

호이스팅이란?

호이스팅이란 실행 시 함수안에 필요한 변수와 메모리 공간을 선언 전에 미리 할당하는 것이다.
즉 코드 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.

console.log(helloA()); // "안녕A"
console.log(helloB()); // 정의되시않은 함수 helloB (에러)

function HelloA() {
	return "안녕A";
}//함수선언식

let HelloB = function() {
	return "안녕B";
}//함수표현식

호이스팅은 선언에서만 일어난다.

console.log(num); //undefined

var num = 6; // 값 할당

console.log(num); // 6

위의 코드는 num이라는 변수를 선언한 후 6이라는 값으로 할당을 한 경우다.
이러한 경우 선언 시점의 num에 대해서만 호이스팅이 발생하므로 undefined가 출력된다. 6이라는 값은 실제 코드가 순차적으로 실행되는 런타임에서 실행된다.

console.log(num); // Uncaught ReferenceError: name is not defined 참조에러 발생

let num = 6;

변수는 선언 > 초기화 > 할당 에 걸쳐 생성되는데 var는 선언과 동시에 undefined로 초기화가 이루어진다.
하지만 let은 선언과 초기화가 분리되어 진행된다. 즉 런타임 이전에 선언은 되지만 초기화가 되지 않아 호이스팅 시 해당 변수에 접근할 수 없는 참조에러가 발생한다.

💡 let/const 변수 선언함수 표현식 에서는 호이스팅이 발생하지 않는다.

호이스팅 사용시 주의할 점

  • 코드의 가독성과 유지 보수를 위해 호이스팅이 일어나지 않도록 합니다.
  • 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언한다.


TDZ (Temporal dead zone)

TDZ란 선언 단계부터 초기화 시작 전까지의 구간을 TDZ(Temporal Dead Zone)이라고 한다.
TDZ는 아래의 그림에서 빨간색과 초록색 사이 즉 선언과 초기화의 사이에 위치한다.

자바스크립트에서 변수는 위와 같이 3단계를 걸쳐 생성된다.

  1. 선언단계
    변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미한다.
    이 변수 객체는 스코프(변수가 값을 참조하기위해 접근 가능한 범위)가 참조하는 대상이 된다.

  2. 초기화단계
    실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계
    이 단계에서 할당된 메모리에는 undefined로 초기화된다.

  3. 할당단계
    사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계

var를 이용해 변수를 만드는 경우 선언과 초기화가 동시에 이루어진다. 하지만 let, const의 경우는 선언과 초기화가 분리되어 진행된다.
호이스팅 예시에서 보았듯이 var를 이용한 경우에는 undefined으로 값이 초기화되어 호이스팅이 발생하지만
let의 경우에는 TDZ구간에 의해 메모리가 할당되지않아 ReferenceError가 발생하는것이다.

0개의 댓글