전역변수와 지역변수

유효범위(scope)

-> 변수의 수명

var vscope = 'global';
function fscope(){
    alert(vscope);	// global
}
fscope();

// ----------------------------------------------

var vscope = 'global';	// 전역변수
function fscope(){
  	var vscope = 'local';	// 지역변수
    alert(vscope);	// local -> 함수 안에서 접근.
}
fscope();

// ----------------------------------------------

var vscope = 'global';	// 전역변수
function fscope(){
    alert(vscope);	// global
}
function fscope2(){
    alert(vscope);	// global
}
fscope();
fscope2();

// ----------------------------------------------

var vscope = 'global';	// 전역변수
function fscope(){
  	var vscope = 'local';	// 지역변수
  	var lv = 'local variables';	// 지역변수 
    alert(lv);
}
fscope();
alert(lv);	// lv는 fscope 내에서만 접근 가능.

// ----------------------------------------------

var vscope = 'global';	// 전역변수
function fscope(){
  	var vscope = 'local';	// 지역변수. 지역 내에 별도의 vscope 생성
}
fscope();
alert(vscope);	// global -> 전역변수

// ----------------------------------------------

var vscope = 'global';	// 전역변수
function fscope(){
  	vscope = 'local';	// 전역변수를 변경한 것.
}
fscope();
alert(vscope);	// local -> 변경된 전역변수.

// ----------------------------------------------

var vscope = 'global';	// 전역변수
function fscope(){
  	var vscope = 'local';	// 새 지역변수 생성
  	vscope = 'local';	// 지역변수 변경
}
fscope();
alert(vscope);	// global -> 전역변수는 변경되지 않았다.

전역변수를 사용하는 이유

var을 쓰는 것과 쓰지 않는 것의 차이를 이해해야 한다.
전역변수는 사용하지 않는 것이 좋다.
-> 여러가지 이유로 그 값이 변경될 수 있기 때문.
함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까?
-> 함수의 동작도 달라지게 된다. => 버그의 원인
또한 함수를 다른 애플리케이션에 이식하는데도 어려움을 초래한다.
함수의 핵심 -> 로직의 재활용!

분명하지 않으면 지역변수를 사용하라.

var

함수 바깥에서 실행 -> 전역변수
함수 내에서 실행 -> 지역변수

유효범위의 효용성

function a () {
    var i = 0; //결과 01234
}
for (var i = 0; i < 5; i++) {
    a();
    document.write(i);
}

// ----------------------------------------------

function a () {
    i = 0; // 결과 무한반복
}
for (var i = 0; i < 5; i++) {	// i -> 전역변수
    a();
    document.write(i);
}
// for문을 실행할 때마다 전역변수 i를 0으로 수정하기 때문에 0이 무한반복된다. i가 커지지 않음.

이름 충돌 가능성을 낮추자.
충돌되면 헷갈린다.

전역변수를 사용하는 법

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());	// 30

// ----------------------------------------------

(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());	// 30
}()) 	// () -> 바로 호출 -> 익명함수
// 전역변수 1도 없다.
// 모듈화

유효범위의 대상

자바스크립트는 함수에 대한 유효범위만을 제공한다.
많은 언어들이 블록(대체로 {})에 대한 유효범위를 제공하는 것과는 다른 점이다.

for (var i = 0; i < 1; i++) {
	var name = 'coding everybody'; 
}
alert(name);

함수의 {} 내에서 var을 사용할 경우 지역변수로 선언되지만, if문이나 for문의 {} 내에서는 선언된 변수는 지역변수가 아니다.

정적 유효범위

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)이라고 한다.

var i = 5;	// 전역변수

function a() {
	var i = 10;	// 지역변수
  	b();
}

function b() {
	document.write(i); // b()에서 i찾기. -> 없다 -> 전역변수 사용 => 5
}

a();

사용될 때가 아니고 정의될 때의 전역변수가 사용된다.
-> 정적 유효범위