JS - 변수의 유효 범위

변수의 유효 범위를 스코프(Scope)라고 부릅니다. 다시 말해 변수에의 접근 범위를 의미합니다.

형 식	설 명
변수명 = 변수 값	변수 선언시 변수 앞에 var 를 생략하면 전역변수로 간주
var 변수명 = 변수 값	변수 선언시 변수 앞에 var 를 붙이면 지역변수가 됨

함수 안에서나 밖에서나 어디서든 변수에 접근할 수 있는 것을 전역 변수라 부르고, 함수 내에 선언된 변수는 함수 내에서만 사용할 수 있어서 지역 변수라 부릅니다. 지역 변수는 함수 밖에서는 사용할 수 없습니다.

만약, 지역 변수와 전역 변수의 이름이 겹친다면 지역 변수가 우선 사용됩니다.

<script>
 // 이것을 전역 변수라 부릅니다.
 // 전역 변수는 어디에서나 사용할 수 있습니다.
 var variable = "global";
 function scope(){ 
   // 이것은 지역 변수입니다.
   // 지역 변수는 선언된 곳에서만 사용이 가능합니다.
   var variable = "local";

   // 변수 이름이 같다면 지역 변수를 우선 사용합니다.
   document.write( variable );
 }

 scope();  // 결과: local
</script>

<script>
 // 이것을 전역 변수라 부릅니다.
 // 전역 변수는 어디에서나 사용할 수 있습니다.
 var variable = "global";
 function scope(){
   document.write( variable );
 }

 scope();  // 결과: global
</script>

<script>
 function scope(){
   // 이것은 지역 변수입니다.
   var variable = "local";
   document.write( variable );
 }

 scope();  // 결과: local
 
 // 지역 변수는 함수 밖에서 사용할 수 없습니다.
 document.write( variable );
 // 결과:
</script>

<script>
 function scope(){
   function size() {
     // 이것은 지역 변수입니다.
     var variable = "local";

     return size;
   }
   // 외부 함수는 내부 함수의 변수에 접근할 수 없음.
   document.write( variable );
 }

 scope();  // 결과:
</script>

var 를 생략한 변수를 전역 변수라 했는데, var 를 선언한 것과 선언하지 않은 변수의 차이를 이해할 필요가 있습니다.

<script>
global = "하보니";

function variable(){
  local = "php";
  var local2 = "하보니";
}
document.write( global );
// 결과: 하보니


// 함수를 호출하지 않으면 함수 내에 있는 
// 전역 변수을 사용할 수 없습니다.
variable();
document.write( local );
// 결과: php

document.write( local2 );
// 결과:
</script>