[Modern JS 이론] Hoisting 이란

JS 는 소스코드를 위에서 아래로 읽어 내려갑니다.

이 부분만 보면 Java와 동일한 것 같습니다.

하지만 Java와 Javascript의 [위에서 아래로 읽어 내려간다]에는 아주 결정적인 차이가 있습니다.

그것은 Javascript에 있는 [Hoisting] 이라는 것입니다.

 

이 글을 보는 모두는 이미 알고 있겠지만, 변수는 선언과 생성(할당)의 절차에 따라서 사용이 가능해집니다.

Java의 관점에서 본다면 아래의 코드는 정상일 것입니다. [코드 1]

int numberInt=10;
System.out.print(numberInt);

그러나, Java의 관점에서 본다면 아래의 코드는 정상일까요? [코드 2]

System.out.print(nubmerInt);
int numberInt=10;

그렇지 않습니다. 그 이유는 바로 [System.out.print(numberInt);] 가 실행 되는 시점에는 numberInt 가 생성되지도 선언되지도 않았기 때문입니다. 그렇다면 numberInt 를 선언만 해둔다면 어떻게 될까요? [코드 3]

int numberInt;
System.out.print(nubmerInt);
numberInt=10;

역시나 에러가 발생하여 멈추게 됩니다. 물론, 상세한 에러 내용은 다르겠지만 말입니다. (후술)

[System.out.print(numberInt)]가 호출하고자 하는 것은 nubmerInt 라는 공간 속의 Value 인데, 그 Value 가 없음으로 인하여 에러가 발생하는 것입니다.

 

그러나 Javascript는 어느 순간부터 다른 결과를 보여줍니다.

그것은 [코드 2]입니다.

console.log(name);
var name="Unchaptered";

Javascript 에서 위와 같은 코드는 절대로 중단되지 않습니다. 그 말은 에러가 발생하지 않아서 컴파일이 중단되지 않았따 라고도 해석할 수 있을 것입니다. (대략적 관점에서)... 그러나 에러가 발생하지 않았다는 의미가 정상적으로 "Unchaptered"라는 값이 콘솔에 나타난다는 것은 아닙니다.

그 이유는 Javscript의 Hoisitng 이라는 것은 somethign.js 파일의 하단부분에 생성된 변수의 선언부분만 something.js 의 최상단으로 끌어온다는 의미 이기 떄문입니다.

다시 한 번 말하겠습니다. 오직 생성된 변수의 선언부만, 할당부를 제외한 선언부만 끌어온다는 의미입니다.

그렇기 때문에 해당 변수가 선언되지 않아서 발생하는 에러는 나오지 않고, 오직 그 값이 할당되지 않아서 나오는 [undefined]라는 값이 콘솔에 나오게 되는 것입니다.

 

어떻게 보면 참 편리한 기능이지만,

굳이 이 기능이 필요한 이유가 있나라는 의문이 드네요...

 

어차피 그 값을 가져오지 못한다면 선언부만 가져오는 것이 에러를 막을 수는 있겠지만,

궁극적으로 코드 전체의 작동이 예측 불가능한 값을 도출하게 만드는 결과도 되지 않을까 조심스럽게 추측해봅니다...

 

+

 

역시나 Modern JS 에 추가된 let 은 에러를 발생시키네요.

Modern JS에 추가된 let/const 이 궁금하시면 아래 문서를 참고해주세요.

[JS 이론] Variable Type : let and const :: Unchaptered의 초보코딩 (tistory.com)