var Hoisting이 뭘까?!

우리는 변수를 선언할 때 const와 let을 주로 사용하지만 var라는 아이도 사용하는 사람이 있다.

 

console.log(a); // Error
const a = 10;

console.log(b) // undefined & Not Error
var b;

위에 보이는 것처럼 const로 선언한 a는 const a = 10이 나오기 전에 콘솔로 출력하려면 error가 발생한다.

그러나 var는 undefined가 출력된다. 이유는 JS엔진 실행 context에 있다.

 

hoisiting이란 끌어 올리는 것을 사전적으로 의미하는데 이런 행동은 사실 var뿐만 아니라 function, const, let도 이뤄진다.

프로그램이 동작하면 실행 컨텍스트에서 변수 오브젝트에 선언된 변수들을 전부 담기 시작한다.

여기서 먼저 선언이 이루어졌다고 볼 수 있다. 선언된 변수들은 초기화를 거쳐야 사용할 수 있는데 여기서 차이점이 있다.

 

var는 선언과 동시에 undefined로 초기화가 이뤄진다. 즉 메모리 공간을 할당받는다.

그러나 let과 const 는 선언만 이뤄질 뿐 초기화는 나중에 이뤄진다. 이 시간 차이를 TDZ(TemporalDead Zone)이라고 하며

사각지대?라고 이해하면 쉽다.

 

결론적으로 var는 선언과 동시에 메모리공간을 할당받으므로 var b;라는 구문을 지나기 전에 이미 메모리 공간을 확보하고 있으므로 출력을 하던 다른 값을 집어넣어도 동작한다.

하지만 let과 const는 초기화가 이뤄지지 않기 때문에 선언 이전에 사용할 수 없다.

 

이 내용은 JS에 대한 내용으로 면접때 자주 나오곤 하는데 알아두면 좋을 것 같다.

그리고 평소 코딩할 때에도 var로 인한 예상치 못한 문제가 발생할 수 있으니 웬만하면 const와 let을 사용하자