[JS] 호이스팅(hoisting)

console.log(useName);

var userName = 'Max';

 

이런 코드가 있다고 가정하자.

 

이렇게 var를 사용해서 할경우 

=> 페이지를 새로고침하면 오류가 발생하지 않고 undefined가 출력될것이다.

let이나 const로 사용해서 할 경우 
=> Uncaught ReferenceError: Cannot access 'userName'before initialization 이라고 오류가 발생할것이다.

 

위 같은 차이가 발생한 이유는 호이스팅(hoisting)이라는 기능때문이다.

 

- 자바스크립트 엔진과 브라우저에서 스크립트를 로드할때 전체 스크립트를 확인해서 함수를 찾은 뒤, 자동으로 로드하고 등록해서 실제 사용하는 코드 아래에 함수를 작성하도록 하는 것이다.

-  이변수의 선언을 파일의 시작부분으로 가져온다. 초기화는 그대로 둬서 실제 코드를 작성한 위치에서 값을 할당한다.

 

var의 경우 

=> 

var userName;
console.log(userName);

이런식으로

undefined의 초기값도 할당해서 오류메시지는 나타나지 않지만 !!!

 

let, const의 경우

=> 호이스팅 개념은 존재하지만 
브라우저는 이 변수를 undefined로 초기화하지 않는다.
일종의 선언일뿐, 초기값을 전혀 할당하지 않는다.
그래서 초기화할수 없다는 오류가 발생하는 것이다.!

 

 

 결론 = > 변수를 사용하기 전에 강제로 선언하는 것이 더 명확하다!!!