[JS] 함수 - 호이스팅(Hoisting)과 TDZ이란?

요약

(좌측) 호이스팅 (우측) TDZ (DMZ 이미지 출처 : VOA 기사)

 

호이스팅 : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

// 함수 호이스팅
result = sum(3,4); // 이 코드는 실행된다.

function sum(num1=5, num2=3) {
    let result = num1+num2;
    return result;
}

console.log(result);

 

TDZ(Temporal Dead Zone) : 호이스팅이 된 변수를 접근하지 못하게 막아놓는 구역

// TDZ(Temporal Dead Zone) 구역 시작 //
console.log(name); // 오류 발생 ReferenceError: Cannot access 'name' before initialization

// TDZ(Temporal Dead Zone) 구역 끝 //
let name = "ming";

console.log(name); // ming

 

함수 호이스팅

• 함수 선언식은 호이스팅이 된다. (아래 코드)
• 함수 표현식, 화살표 함수는 호이스팅이 되지 않는다.

// 함수 호이스팅
result = sum(3,4); // 이 코드는 실행된다.

function sum(num1=5, num2=3) {
    let result = num1+num2;
    return result;
}

console.log(result);

 

javascript는 코드를 위에서부터 아래로 (인터프리터 방식)으로 읽는다.

그런데 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당해놓기 때문에 함수 선언 전에 호출이 가능하다. (호이스팅) 

변수 호이스팅

var을 이용한 호이스팅

• 변수가 호이스팅 될 때는 선언, 초기화만 된채로 호이스팅이 된다. 즉, 할당까지는 호이스팅이 되지 않는다.

console.log(name); // undefined

var name = "ming";

console.log(name); // ming

 

즉, 호이스팅에서 var name; 이 선언된 채로 가장 상단의 코드인 console.log가 실행되므로 undefined가 뜨게 된다.

 

const, let을 이용한 호이스팅

• var은 너무 유연하다. 코드가 길어지면 헷갈리기 쉽다. const와 let은 그것을 보완한다.
• 우리가 상식적으로 생각하는 오류가 발생하게 된다.
• 그래서 보통 변수는 let을 상수는 const를 많이 사용한다.

// TDZ(Temporal Dead Zone) 구역 시작 //
console.log(name); // 오류 발생 ReferenceError: Cannot access 'name' before initialization

// TDZ(Temporal Dead Zone) 구역 끝 //
let name = "ming";

console.log(name); // ming

 

그렇다면 const와 let 변수를 썼을 때는 호이스팅이 안되는 것일까? 아니다!

호이스팅이 되었지만 접근만 못하게 한 것이다.

 

let name="ming" 이 나오기 전 구역을 TDZ(Temporal Dead Zone) 이라고 한다. 이름 그대로 일시적으로 죽은 구역이다.