[JavaScript] 호이스팅(Hoisting)

호이스팅(Hoisting)

  - 변수 호이스팅 또는 함수 호이스팅이라고 부름

  - 코드를 실행하기 직전에, 자바 스크립트의 변수 선언문과 함수 선언문은 해당 스코프의 최상단으로 끌어올린다.

     > 코드 재배치

 

 

예시

var globalNum = 10;
function print() {
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "<br>");
    var globalNum = 20;
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "<br>");
}
print();

호이스팅 후

var globalNum = 10;
function printNum() {
    var globalNum;
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "<br>");
    globalNum = 20;
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "<br>");
}
printNum();

  - 호이스팅 전, 세번째 줄의 코드는 전역변수를 가리키는 것 처럼 보임

  - But 지역변수 globalNum이 선언만 되어있고 초기화는 안된 상태

  - 이때 globalNum에 접근하면 아직 초기회 되지 않은 변수에 접근했으니 undefined 값을 반환

  - 함수 호이스팅에 의해 printNum() 함수 안 var globalNum; 부분이 함수의 최상단으로 이동됨

  - 변수가 실제로 초기화 되는 곳은 호이스팅 전 print() 메소드 안의 var globalNum=20;