참고 URL : http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting
아래 샘플코드와 같이 작성한 경우 의도하지 않게 엉뚱한 결과를 출력할 수도 있으니…주의해야 함.
strVal = "global";
function myFunc() {
alert(strVal);
var strVal = "local";
alert(strVal);
}
myFunc();
|
위의 코드의 실행결과를 단순히 예측해보면 화면상에 아래와 같이 출력될 것이라 생각할 수 있다.
| global local |
하지만 실제 결과는 아래처럼 실행된다.
| undefined local |
이는 자바스크립트에서 var로 변수를 명시적으로 선언하기 이전에도 해당 변수명을 이용할 수 있도록 유연하게, 대처하기 때문으로…… myFunc() 함수 안에서 var strVal을 선언하기 이전에 alert()으로 해당 변수를 호출하더라도, 전역변수를 사용하는 것이 아니라, var strVal가 우선적으로 myFunc()안에서 수행되기 때문에……..위의 샘플코드는 실제로 아래 코드와 같이 myFunc() 안의 var을 이용한 선언부가 먼저 수행된다.
strVal = "global";
function myFunc() {
var strVal;
alert(strVal);
strVal = "local";
alert(strVal);
}
myFunc();
|
JavaScript에서 var로 변수를 선언하고 값을 할당하기 전까지는 기본값으로 “undefined”가 되기 때문에 첫번째 alert에서는 undefined로 출력되고, 두번째 alert에서는 할당된 문자열이 출력된다.
간단한 내용이지만 무심코 사용하다 보면…..엉뚱한 결과가 나와서 삽질할 수 있으니, 왠만하만 변수 선언은 상단에서 한번에 미리 정의하는게 좋음.