자바스크립트 함수지향 - 유효범위 (Scope)

 

자바스크립트 함수지향 유효범위

 

유효범위(Scope)는 변수의 수명을 의미한다.

 

 

전역변수

var vscope = "global";

function fscope(){
	alert(vscope);
}

fscope();	// global

 

지역변수

var vscope = "global";

function fscope(){
    var vscope = "local";
    var lv = "local variables";
    
    alert(vscope); 
}
fscope();  // local
alert(lv); // undefined

 

자기 자신에게 가까운 (함수 안에 있는) 변수를 가리킨다.

var vscope = "global";

function fscope(){
	var vscope = "local"
}

fscope();
alert(vscope);  // global

 

var 키워드 뒤에 변수는 지역 변수가 된다.

var vscope = "global";

function fscope(){
	vscope = "local"
}

fscope();
alert(vscope);  // local

 

var 없이 변수를 선언하면 지역의 변수를 주는게 아니라 전역의 변수를 주는 것.

var vscope = "global";

function fscope(){
	var vscope = "local"
    vscope = "local"
}

fscope();
alert(vscope);  // global

 

var vscope 지역 변수가 생성되어있으므로 var를 지정하지 않아도 지역 변수를 가리킨다.

 

※ 전역변수는 여러가지 이유로 그 값이 변경될 수 있기 때문에 사용하지 않는 것이 좋다.

전역 변수의 값이 달라지면 함수의 동작도 달라지게 된다. 함수의 핵심은 로직 재활용!

변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 

전역 변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

 

function a() {
	var i = 0;
}

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

function a() {
	i = 0;
}

for (var i = 0; i < 5; i ++){
	a();
	document.write(i);  // error
}

 

for문 안에 들어있는 i의 값이 전역 변수이고 a()의 i도 전역 변수.

두 이름이 같아서 a()가 실행될 때 마다 for문 안에 i의 값이 계속 0으로 초기화 되어 무한루프가 된다.

 

 

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수를 만들고 전역 변수 객체의 속성으로 변수를 관리하는 방법을 사용한다.

var MYAPP = {} // 전역변수이고 객체

MYAPP.calculator = { // 객체의 속성
    "left" : null, // key : value
    "right" : null
}

MYAPP.coordinate = {
    "left" : null,
    "right" : null
}

// MYAPP.calculator와 MYAPP.coordinate의 키 값은 같지만 다른 것

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, // key : value
        "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()); 

}()) // 함수를 만들자마자 호출

 

 

자바스크립트는 함수에 대한 유효범위만을 제공한다. 

for (var i = 0; i < 1; i++){
	var name = "이름"; // for문 안에서 변수 선언은 지역변수 아님..
}

alert(name);  // 이름

 

자바스크립트는 함수가 선언된 시점에서 유효범위를 갖는다. 

이러한 유표범위의 방식을 정적 유효범위(Static scoping), 렉시컬(lexical scoping)이라고한다. (클로저와 연결된 개념)

누구나 똑같은 값을 같기 때문에 정적.

var i = 5; // 전역변수

function a() {
    var i = 10; // 지역변수
    b(); // 함수가 호출된 곳
}

function b(){ // 함수가 정의된 곳
    document.write(i);
}

a();

 

b() 함수안에 i라는 지역변수가 존재하는지 찾는다.

없다면 전역변수를 찾게 되는데, 함수 b()가 정의된 곳에서 i의 전역 변수를 찾는다.

※ 함수가 사용되는 대상에 따라서 변수에 새롭게 접근할 수 있다면 동적인 유효범위

 

전역 유효범위와 window 객체

// 문자열 test를 담은 전역 유효범위에 속하는 변수
var test = "test";

// 앞의 전역 변수와 window 객체의 test 프로퍼티가 같음을 알 수 있다.
alert( window.test == test );

 

함축적인 전역 유효범위 변수 선언의 예

function test(){
	foo = "test";
}

// foo 값을 설정하기 위해 함수 호출
test();

// foo는 이제 전역 유효범위를 가진다.
alert( wiindow.foo = "test" )