Javascript 함수지향-유효범위

유효범위란?

 

 

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

 

 

 

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

 

• 함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다.
• 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다. 

 

 

 

 

 

 

 

 

var vscope = 'global';
function fscope(){
    var vscope = 'local';
    alert('함수안'+vscope);
}
fscope();
alert('함수밖'+vscope);

 

• 함수 안에서 변수 vscope을 조회했을 때 함수 내에서 선언한 지역변수 vscope의 값인 local이 사용되었다. 하지만 함수 밖에서 vscope를 호출했을 때는 전역변수 vscope의 값인 global이 사용된 것이다.
• 즉 지역변수의 유효범위는 함수 안이고, 전역변수의 유효범위는 에플리케이션 전역인데, 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다는 것을 알 수 있다.

 

 

 

 

 

 

 

var vscope = 'global';
function fscope(){
    vscope = 'local';
    alert('함수안'+vscope);
}
fscope();
alert('함수밖'+vscope);

 

• 함수밖에서도 vscope의 값이 local인 이유는 함수 fscope의 지역변수를 선언할 때 var를 사용하지 않았기 때문이다. var를 사용하지 않은 지역변수는 함수 안에서 국한되 않고 전역변수가 되버린다.
• 따라서 3행(vscope='local';)은 전역변수의 값을 local로 변경하게 되버린다. var을 쓰는 것과 쓰지 않는 것의 차이를 이해해야 한다.

 

 

 

 

 

실제 실무에서의 전역변수와 지역변수

 

• 전역변수는 사용하지 않는 것이 좋다. 여러가지 이유로 그 값이 변경될 수 있기 때문이다. 함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라진다면 곤란하다.
• 함수의 동작도 달라지게 된다. 이것은 버그의 원인이 된다. 또한 함수를 다른 에플리케이션에 이식하는데도 어려움을 초래한다.
• 함수의 핵심은 로직의 재활용이라는 점을 상기하자. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

 

 

 

 

 

 

 

 

 

 

유효범위의 효용

 

 

 

 

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

 

 

 

 

 

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

 

 

 

• 위의 두 코드의 결과를 보면 변수 i를 지역변수로 사용했을 때와 var을 적지 않고 전역변수로 사용했을 때의 차이점을 보여준다.
• 전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 결과값이 나오지 않고 무한반복되어 로딩만 되는 의도하지 않은 문제를 발생시킨다.
• 즉 함수 function() 안의 변수 i가 전역변수로 바뀌면서 for문의 a();뿐만 아니라 i값까지 영향을 미쳐 오류가 났다고 볼 수 있다.

 

 

 

 

 

 

 

 

 

 

전역변수의 사용

 

 

 

 

• 불가피하게 전역변수를 사용해야 하는 경우는 위의 코드 중 왼쪽 코드처럼 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다.
• 전역변수를 사용하고 싶지 않다면 위의 코드 중 왼쪽 코드에서 오른쪽 같이 수정시켜 익명함수를 호출함으로서 이러한 목적을 달성할 수 있다.
• 즉 var MYAPP={}은 함수 function()안에 들어있는 하나의 지역변수로 변화된다.
• 맨 아래 '()'은 바로 호출하라는 의미이다.

 

 

 

 

 

 

 

 

 

유효범위의 대상

 

 

 

 

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

• 자바스크립트는 함수에 대한 유효범위만을 제공한다. 많은 언어들이 블록(대체로 {,})에 대한 유효범위를 제공하는 것과 다른 점이다. 위의 코드 결과는 jin seok이다.
• 즉 자바스크립트의 지역변수는 함수 function()에서만 유효하다. if, for문 등등의 안에 선언된 변수는 자바스크립트에서는 지역변수가 유효하지 않으므로 위의 코드를 보면 밖에서도 유효할 수 있다.

 

 

 

 

 

for(int i = 0; i < 10; i++){
    String name = "jin seok";
}
System.out.println(name);

자바에서는 자바스크립트와 반대로 위의 코드는 허용되지 않는다. name은 지역변수로 for 문 안에서 선언 되었는데 이를 for문 밖에서 호출하고 있기 때문이다.

 

 

 

 

 

 

 

 

 

 

 

정적 유효범위

 

 

 

var i = 5;
 
function a(){
    var i = 10;
    b();
}
 
function b(){
    document.write(i);
}
 
a();

• 자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)이라고 한다.
• 위의 코드와 결과를 보면 함수 function b()안의 document.write(i);의 i가 실행되는 시점은 function a()안의 지역변수의 인해서가 아닌 전역변수인 var i = 5;에 영향을 받는다.
• 즉, function b()는 function a()안에 있는 b();로 인해 호출되는 시점이 아니고 function b()가 정의되었을때의 시점에는 무조건 전역변수에 영향을 받는다.