호이스팅 1.
실행 결과 :
(1) 함수 내부에서 변수 num의 값은 undefined입니다.
(2) 함수 내부에서 변수 num의 값은 20입니다.
위처럼 함수 내에서 변수 선언 및 초기화문보다 먼저 변수를 읽어오도록 실행문을 작성했을 때, 브라우저는 실행문의 변수를 undefined 상태로 먼저 선언한다. 이를 호이스팅(Hoisting)이라 한다.
실행문(1)에 앞서 var num; 이 선언된 것과 같은 상태이므로 실행문(1)의 실행 결과는 undefined로 출력된다.
호이스팅 2.
실행 결과 :
(1) 함수 내부에서 변수 num의 값은 undefined입니다.
(2) 함수 내부에서 변수 num의 값은 20입니다.
(3) 함수 외부에서 변수 num의 값은 10입니다.
변수 num을 전역변수로 선언 및 초기화하였으나, 함수 globalNum() 실행블록 내부에서 변수 num을 지역변수로 다시 선언 및 초기화하였다. 지역변수와 전역변수의 이름이 동일한 경우, 지역변수가 사용된다.
실행문 (1)의 경우 전역변수의 존재에도 불구하고 브라우저가 실행문 (1)에 앞서 변수 num을 undefined 상태로 선언해버리는 호이스팅이 일어남을 알 수 있다.
실행문 (3)의 경우 함수 globalNum()의 실행이 종료됨과 동시에 지역변수 num은 소멸하므로 전역변수 num에 대입된 값인 10이 출력되는 것을 확인할 수 있다.
호이스팅 피하는 방법 1.
실행 결과 :
(1) 함수 내부에서 변수 num의 값은 10입니다.
(2) 함수 내부에서 변수 num의 값은 20입니다.
(3) 함수 외부에서 변수 num의 값은 10입니다.
모든 전역함수와 전역변수는 window 상의 객체로 등록되어 있기 때문에 window.함수명(변수명)과 같은 형태로 사용 가능하다. 이를 이용해 함수 실행블록 내의 호이스팅 대상인 실행문(1)의 변수명에 window.num을 지정한다.
전역변수 명과 지역변수 명이 같고 함수 내에서 둘 다 쓰고 싶을 때 사용하는 방법이다.
호이스팅 피하는 방법 2.
실행 결과 :
(1) 함수 내부에서 변수 num의 값은 10입니다.
(2) 함수 내부에서 변수 num의 값은 20입니다.
(3) 함수 외부에서 변수 num의 값은 20입니다.
일반적으로 호이스팅을 피하는 방법은 위와 같이 변수 선언 및 초기화문을 먼저 기술한 후 변수의 값을 읽어오는 실행문을 작성하면 된다.
함수 실행블록 내의 num = 20; 은 전역변수 num에 20이라는 값을 대입한 대입문이기 때문에 함수의 실행이 종료되어도 실행문(3)의 변수 num 값이 20으로 바뀌어 있는 것을 확인할 수 있다.
