[JavaScript] 호이스팅이란?

 

호이스팅이란?

코드가 실행하기 전 변수선언 / 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상이다.

 

자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, const, let, function, class)을 스코프에 등록한다.

코드 실행 전 이미 변수선언 / 함수선언이 저장되어 있기 때문에 선언문보다 참조 / 호출이 먼저 나와도 오류 없이 동작함.

즉, 변수와 함수선언은 호이스팅의 대상이며, 변수는 선언과 동시에 'undefined'로 초기화된다.

함수는 함수 전체가 끌어올려진다.단, 함수 표현식은 변수에 할당되는 부분만 호이스팅되며, 함수 전체는 끌어 올려지지 않음.

 

console.log(x); // undefined
var x = 5;

foo(); // "Hello, I am a function"
function foo() {
  console.log("Hello, I am a function");
}

// 아래의 코드는 호이스팅이 발생하지 않음
console.log(y); // ReferenceError: y is not defined
let y = 10;

 

자바스크립트의 변수 생성 단계

1. 선언 ( Declaration ) - 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다. 초기화 전까지 TDZ 상태.
2. 초기화 (Initialization ) - 변수 객체 값을 위한 공간을 메모리에 할당한다. 이 때 할당되는 값은 undefine이다.
3. 할당 ( Assignment) - 변수 객체에 값을 할당한다.

TDZ ( Temporal Dead Zone ) - 변수가 선언된 시점부터 초기화되기 직전까지의 구간이다. 이 구간 동안 변수에 접근하려고 하면 에러가 발생한다. 이는 변수가 선언되었지만 초기화되기 전까지 안전하게 사용할 수 없다는 의미이다.

 

var, let, const

var는 선언과 동시에 초기화까지 이루어진다. 즉, 선언과 동시에 undefined가 할당된다.

let과 const는 선언만 될 뿐, 초기화가 이루어지지 않아 메모리 할당이 아직 할당되지 않은 TDZ에 들어간다.