전역변수와 지역변수
지역변수는 함수 내에서 쓰이는 변수를 의미하고 전역변수를 프로그램 전체에서 쓰이는 변수를 의미한다.
var의 사용에 따른 차이
함수 안에서 변수를 정의할 때 var을 사용하면 지역변수로 인식되고 var을 사용하지 않으면 전역변수를 찾아 그 값을 정의시킨다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var vscope = 'global'; //전역변수 vscope
function fscope1(){
var vscope = 'local'; //지역변수 vscope를 선언하고 값을 넣는다.
}
fscope1(); //지역변수가 선언되고 값이 들어간다.
alert(vscope); //전역변수를 바꾸지 않아 global 출력
function fscope2(){
vscope = 'local'; //전역변수 vscope 값 변경
}
fscope2(); //전역변수 값 변경
alert(vscope); //전역변수가 바뀌어 local 출력
</script>
</body>
</html>전역변수를 사용하여 싶지 않을 때 (with 익명함수)
익명함수를 사용하여 전역변수를 선언하지 않고 모두 지역변수로 선언할 수 있다.
이렇게 하는 이유는 지역변수로 사용하는 것이 나중에 코드의 양이 많아졌을 때 변수들의 충돌을 예방 할 수 있기 때문이다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//전역변수를 사용하고 싶지 않을 때
(function(){
var MYAPP = {}
MYAPP.calculator = {
'left' : null,
'right' : null
}
MYAPP.coordinate = {
'left' : null,
'right' : null
}
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());
}())
//익명함수를 통해서 지역변수로만 사용하게 한다.
</script>
</body>
</html>JavaScript만의 지역변수, 전역변수 정의
JavaScript는 function안의 변수만을 지역변수로 인식한다. 다른 언어는 function외에도 for문 if문에서 선언된 변수도 지역변수로 인식한다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//자바스크립트와 다른 언어와의 차이
for(var i =0; i < 1; i++){
var name = 'code';
}
alert(name); // code가 출력된다.
// 자바스크립트는 함수의 안에 선언된 변수만 지역변수가 되고 for문이나 if문 같은 곳에서 선언된 변수는 전역변수로 선언된다.
// 다른 언어는 for문이나 if문 같은 곳에서 선언된 변수는 지역 변수로 선언된다. 따라서 위의 코드가 실행되지 않을 것이다.
</script>
</body>
</html>정적 유효범위를 갖는 JavaScript
유효 범위 방식에는 정적 유효범위와 동적 유효범위가 있다.
정적 유효범위는 static scoping 또는 lexical scoping이라고 불리며 함수가 정의될 때의 전역변수 값이 사용되는 것을 의미한다.
동적 유효범위는 함수가 호출될 때의 전역변수 값이 사용되는 것을 의미한다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var i = 5;
function a(){
var i =10;
b();
}
function b(){
document.write(i); //b가 사용될 때가 아니라 정의될 때의 전역변수 값이 사용된다. -> 5
}
a(); // 출력 값 5
</script>
</body>
</html>
```
