[Javascript][ES6]변수 호이스팅

호이스팅 : 스코프 내부 어디서든 최상위에 선언된 것처럼 행동

자바스크립트가 동작하는 과정에서 코드를 한번 훑어보고 변수들을 스코프 최상단으로 끌어올리는 과정이 있다.

( 참고로 변수들의 스코프는 아래와 같다.

var : 함수 스코프

const, let : 블록 스코프 )

예)

console.log(변수); // undefined
var 변수 = 1;
var 변수2 = 2;

function 함수() {
    console.log(변수); // undefined
    console.log(변수2); // 2
    var 변수 = 3;
    변수2 = 4;
}

함수();
console.log(변수); // 1
console.log(변수2); // 4

위의 코드를 호이스팅의 개념으로 보면 아래와 같은 코드가 된다

var 변수; // 호이스팅
var 변수2; // 호이스팅
console.log(변수); // undefined
var 변수 = 1;
var 변수2 = 2;

function 함수() {
    var 변수; // 호이스팅
    console.log(변수); // undefined
    console.log(변수2); // 2
    var 변수 = 3;
    변수2 = 4;
}

함수();
console.log(변수); // 1
console.log(변수2); // 4

변수는 선언과 할당의 단계가 있는데,

var 변수의 경우는 선언만( var 변수; ) 하는 경우 바로 undefined로 할당된다. 그렇기 때문에 이 상태로 바로 변수를 참조하려고 하면 undefined를 밷는다. 호이스팅의 경우도 마찮가지로 undefined로 초기화가 된다.

var 변수의 경우는 위의 코드처럼 생각할 수 있지만 const, let은 조금 다르다

let 변수는 선언만 하는 경우 undefined로 할당되지만, 호이스팅이 되면 아무것도 할당되지 않는 상태로 스코프 최상단으로 올라간다.

const 변수는 선언만 하는 경우 에러가 난다. 할당을 같이 해줘야 하지만, 호이스팅이 되면 역시 미할당된 상태로 스코프 최상단으로 이동한다.

만약 호이스팅이 되어서 할당되지 않은 변수를 참조하려고 하면? ReferenceError가 발생한다.

여기서 스코프의 시작부터 변수가 최초로 참조될때까지의 구간을 TDZ(temporal dead zone)라는 개념으로 생각 할 수 있다.

이 구간에 값이 할당되지 않은 const, let 변수들은 TDZ에 속하게 되어 ReferenceError가 발생한다.

 

결론은 변수 할당은 스코프내 최상위에서 하자!

 

참고로 호이스팅의 개념은 function, class, import에도 있다.