[Javascript] 유효범위

자바스크립트 닌자 비급이라는 책으로 공부 중에, 정리가 너무 잘되어 있어서, 나 또한 정리를 하고 머릿속에 더 깊숙한 곳에 넣고 싶었다. 

다른 언어들과는 다르게 javascript에서는 유효범위가 조금은 다르다.

 JAVA를 예로 들면, 

if (window) {

var x = 111;

}

alert(x);

라고 하면, x는 undefined 값이 나온다.

하지만 Javascript에서는 x가 111이라는 값을 갖고 있다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<script type="text/javascript">   function outer(){     // 여기에 inner()를 선언할 수 있다. hoisting 때문이다.     var a = 1;       function inner(){ /* 아무것도 하지 않는다 */ }       var b = 2;       if (a == 1) {         var c = 3;     } }   outer();   </script>

위의 코드에서 변수 a,b,c와 함수 inner()의 유효범위를 확인해보자.

outer() 함수 내에 있는 변수 a,b,c는 초기화된 시점에서 outer() 함수가 끝나는 지점까지 그 값을 갖는다.

그렇다면 inner() 함수도 선언된 시점에서 outer() 함수가 끝나는 지점까지 함수의 기능을 할까? 

아니다.

outer() 함수 내에 맨 밑에 inner() 함수가 선언되어도 outer() 함수가 시작하는 시점부터 inner() 함수의 기능을 사용할 수 있다. 이것을 hoisting(끌어올리기)이라고 한다. hoisting이란, 단어 그대로 끌어올리기다. 그래서 말 했듯이, inner() 함수가 outer() 함수 내의 가장 밑에 선언되었다고 하더라도,  outer() 함수가 시작되는 시점부터 inner() 함수의 기능을 선언하여 사용할 수 있다.

직접 scope를 사진으로 확인해보자.

백문이 불여일견, 역시 글보단 사진이다.

참고 : Secrets of the Javascript Ninja (존레식, 베어 바이볼트)