DEVELOPyo

javascript 에서 hoisting 이란 단어 뜻 그대로 끌어올리기라는 의미로써, 변수를 최상단으로 끌어올리는 것을 뜻한다.

이와 같은 자바스크립트에서의 호이스팅이란 특징으로 인해, 

javascript에서 변수는 사용된 이후 선언 될 수 있다. (==변수를 사용한 후 선언 할 수 있다)

[case 1]

[case 2]

변수에 값을 저장/사용 후 선언한 케이스

java 같으면 케이스2에서 Exception 을 뱉겠지만, javascript 는 결과 5를 정상적으로 console 에 출력한다.

보기엔 에러가 발생할 것으로 보였던 코드임에도 에러없이 정상 결과가 나온 이유는 바로 hoisting 때문이다.

(var x; 부분(변수 선언부)을 현재 scope에서 최상단으로 끌어올렸기 때문)

(스코프와 관련된 내용은 여기를 참고)

그렇다면 호이스팅은 항상 이뤄질까?

자바스크립트는 선언부만 hoisting 할 뿐, 초기화 부분까지 호이스팅하지 않는다.

[case 3]

1 2 3 4 5

$(document).ready(function(){     console.log(x);     console.log(y);     var x = 5; });

cs

 

위 샘플 소스의 결과는 아래와 같다.

x 는 'undefined'를 콘솔에 출력하고 있고,

y 는 undefined Error 을 던지고 있다.

var x 부분은 hoisting 되었지만 초기화(=5)부분은 호이스팅되지 않았기 때문이다.

y는 스코프내에 선언되어 있지 않으므로 Error 를 뱉고 있다.

[결론]

예상치 못한 hoisting 동작으로 인한 에러를 피하기 위해 변수 선언 및 초기화는 최상단에서 해주자.

참고 : https://www.w3schools.com/js/js_hoisting.asp