[JS] 변수의 유효 범위

프로그램에서 어떤 변수가 정의되어 있는 영역을 말한다.

변수의 수명을 의미한다.

전역변수

전역 변수의 유효범위는 전역적(global)이다.

전역변수는 var를 생략할 수 있다.

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

 

---

 

지역변수

어떤 함수 안에서 선언된 변수는 오직 해당 함수 몸체 안에서만 정의된다.(local)

지역변수는 var를 생략할 수 없다.

함수 내에서만 지역변수를 선언할 수 있다.

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

• 같은 이름을 갖는 경우, 함수 내부에서 지역변수는 전역변수 보다 우선한다.
• 지역 유효범위도 중첩될 수 있다.

(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());
}())

• MYAPP을 전역변수로 선언하여 객체를 다루는 코드를 작성할 수 있다.
• 지역변수로 사용하는 방법으로, 위와 같이 익명함수로 사용하는 것이 있다.

 

---

 

함수 유효 범위와 끌어올림(hoisting)

• 블록 유효범위 : 블록 안에 있는 코드는 자신만의 유효범위를 가지고, 블록 밖에서는 보이지 않는다.
• 함수 유효범위 : 변수는 해당 변수가 정의된 함수 안에서 보일 뿐 아니라, 그 함수 안에 중첩된 함수 안에서도 보인다.

 

Hoisting

어떤 함수 안에서 선언된 모든 변수는 그 함수 전체에 걸쳐 유효하다.

변수가 선언되기 전에도 유효하다는 것이다.

var scope = 'global';
function f(){
	console.log(scope); //undefined
	var scope = 'local';
	console.log(scope); //local
}

• 함수 범위에 따라 선언이 먼저 이루어지고 코드가 실행된다.
• 위의 코드는 아래와 같아진다.

var scope = 'global';
function f(){
	var scope;	
	console.log(scope); //undefined
	var scope = 'local';
	console.log(scope); //local
}

• 변수가 선언되고 undefined로 초기화 되었지만, 값이 대입되지 않았기 때문에 첫번째 출력은 undefined이다.

 

---

 

 

프로퍼티로서의 변수

전역 변수를 선언한다는 것은 전역 객체의 프로퍼티를 정의하는 것이다.

• var 로 생성된 프로퍼티는 수정할 수 없고, delete 연산자로 소멸시킬 수 없다.
• 엄격 모드(use strict)가 아닌 상황에서 선언하지 않은 변수에 값을 대입하는 경우, 자동으로 전역변수를 생성한다.
• 자동으로 생성된 변수는 전역 객체의 수정 가능한 프로퍼티이며 삭제할 수 있다.
• this로 전역 객체를 참조할 수 있다.

 

유효범위 체인

자바스크립트는 언어적으로 유효범위를 가지고 있는 언어이다.(lexically scoped)

지역 변수는 변수가 선언된 함수 전체에 걸쳐 유효하고, 그 안에 중첩된 함수 내에서도 유효하다.

function a(){ var i = 0; } //지역변수
for (var i = 0; i < 5; i++){
	a();
	document.write(i);
}
//0, 1, 2, 3, 4

function a(){ i = 0; } //전역변수
for (var i = 0; i < 5; i++){
	a();
	document.write(i);
}
//0, 0, 0, 0, ... 

• function a()에서 i는 반복문 내의 i와 같은 값이다.

 

---

 

정적 유효범위

lexical scoping, static scoping

var i = 5;

function a(){
	var i = 10;
	b();
}

function b(){
	document.write(i); //5
}

• 사용할 때의 변수가 아닌, 정의될 때의 변수가 사용된다.