변수 선언 방식에 따른 호이스팅의 차이, 호이스팅이란?

 

호이스팅이란 간단히 말해서 특정 스코프의 코드 실행 전에 var, let, const, function 등으로 선언된 변수를 스캐닝하는것이다.

 

var로 선언된 변수들은 호이스팅(스캐닝) 시,

 

undefined라는 falsy값으로 먼저 할당이되며 런타임이 실행돼 특정 값이나 주소로 할당 되기 전까지 해당 값을 유지한다.

 

반면, let, const는 호이스팅될 때 undefined가 되지않는다.

 

또 전역 var 변수는 window 객체의 자식이되지만(콘솔 창에 window.foo 등으로 확인 가능),

 

전역 let, const는 window 객체에 붙지않는다.

 

var과 let, const가 참조될 수 있는 스코프도 차이와 함께 꼭 기억해두어야하는 사항일것이다.

 

 

물론, function으로 선언된 함수도 변수 취급을 받아 호이스팅된다.

 

함수는 일급객체이므로 변수가 가르키는 공간에 값이 아닌 주소가 담기는데,

 

함수 선언문을 통해 함수를 등록했다면, 호이스팅 시 함수의 이름에 함수 객체의 주소값이 담긴다.

 

따라서, 함수 선언문 보다 더 위의 코드에서 해당 함수의 호출이 가능하다.

 

따라서 위 사진의 함수 호출은 가능하다.

 

같은 스코프, 하위 스코프에서 상위 스코프에 등록된 함수의 호출은 이론적으로 가능하기때문.

 

이 실험에서 'c'가 무사히 alert되므로 확인 가능하다.

 

 

그러나 함수 표현식, 화살표 함수를 사용한다면 무조건 선언에 var, let, const를 사용해야하는데,

 

이렇게되면 해당 키워드를 사용해 선언한 변수와 똑같은 방식으로 호이스팅을 해주기때문에 주의할 필요가 있다.

 

 

일단 위 사진은 하나의 에러를 내포하는데,

 

일단 js파일이 로드되면, 실행 스코프와 상관없이 같은 스코프에 위치한 let, const의 재선언이 존재하는지 확인하며,

 

이에 대한 에러 정보를 콘솔에 출력한다.

 

 

그리고 함수 런타임이 실행되어 함수 내부의 호이스팅이 이루어질 때, 

 

let은 아무런 값도 할당되지않지만, 호이스팅 이후 선언문이 실행되면 undefined값이 자동으로 할당된다.

 

따라서, 함수 내부의 마지막 줄이 없다면 콘솔 창에는 undefined가 출력될것이다.