[js] javascript에서 지역변수와 전역변수

javascript에서 변수선언을 할 때 var 를 쓰고 안쓰고로 전역변수/지역변수를 결정지을 수 있다는걸 알고 계셨나요? 일반적으로 var 를 기본적으로 써왔고, javascript 에서 전역변수를 사용할 일이 많지 않다보니 모르시는 분들이 많은 것 같습니다.

얼마전 필요에 의해서 테스트 코드를 작성했다가 그냥 버리기 아까워서 jsbin을 설치하는 노가다를 하면서;; 정리 했습니다. 누군가에겐 도움이 되길 바라는 마음에 포스팅 합니다..

var outer_variable1 = "outer variable1";
outer_variable2 = "outer variable2";

function test_func() {
  var local_variable = "local variable";
  global_variable = "global variable";

  console.log(outer_variable1);
  console.log(outer_variable2);

  (function inner_func() {
    console.log(local_variable);
    console.log(global_variable);
  })();
}

function test_func2() {
  console.log(global_variable);
  console.log(local_variable);
}

console.log(outer_variable1);
console.log(outer_variable2);

test_func();
test_func2();

* 위 코드는 http://jsfiddle.net/JP2MC/ 에서 테스트 하실 수 있습니다.
(FF Console 또는 Firebug 콘솔로 console.log 가 출력되며 해당 부분을 alert 으로 변경하여 다른 환경에서도 확인해보실 수 있습니다.)

결과;
outer variable1
outer variable2
outer variable1
outer variable2
local variable
global variable
global variable
ReferenceError: local_variable is not defined

예상했던 결과인가요?
함수 밖에서 선언한 변수 outer_variable1과 outer_variable2는 어디서든 사용이 가능하고 함수 내에서 var를 사용해 선언한 변수는 다른 함수에서 호출하자 defined 되지 않았다는 에러를 보여주고 있습니다.

마무리;
javascript 에서도 지역변수/전역변수가 있다는 것을 확인하셨나요?
비단 javascript 만의 얘기는 아니지만 javascript 에서의 전역변수 사용은 종종 편리함을 가져올 수 있지만 엄청난 재앙을 불러올 수도 있습니다. 꼭 필요한 곳에 살펴보며 사용하는 지혜가 필요합니다. 🙂