[JavaScript -생활코딩] 유효범위

유효범위(1)

전역변수와 지역변수

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

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

//아래 코드에서 var vscope = 'local';를 뺀 코드
//결과는 global 이다.
//vscope이 바깥쪽에 있기 때문에 global이 경고창에 뜨게된다.

↑ fscope는 함수바깥에 선언되어있는 vscope에 접근 할 수있다.

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

//결과는 local 이다. 
//같은 함수안에 있는 vscope를 출력.

↑ alert(vscope); 은 자기 가까이에 있는 같은 함수 내에 있는 vscope인 local을 결과로 출력한다

​

이러한 개념을

지역변수(local) (←----위 코드의 local을 의미)

전역변수(global) (←---위 코드의 global를 의미)

라고한다.

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

//global이 2번출력된다.

var vscope = 'global' ; 전역변수

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

//함수 바깥쪽의 alert(lv)결과는 undefined

↑함수내에서 만들어진 lv라는 함수는 지역변수이고 지역변수는 그 지역에서만 접근가능

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

//결과는 global

↑로컬변수를 만들때 var이라는키워드를 쓰게되면, var이라는 키에 따라오는 변수는 로컬변수가된다.

​

[application전역 { fscope지역 vscope='local' } vscope='global']

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

//결과는 local

↑var를 빼고 vscope입력은 그것은 전역변수의 vscope를 변경한 것

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

//결과는 global

↑var vscope = 'local'; 이라는 것으로 인해서 이미 로컬변수가 생성되었다. 이미 지역변수가 있다면 vscope는 지역변수를 가르키게된다.

​

지역변수를 사용해야 한다!

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

함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까?

함수의 동작도 달라지게 된다. 이것은 버그의 원인이 된다.

또한 함수를 다른 에플리케이션에 이식하는데도 어려움을 초래한다.

함수의 핵심은 로직의 재활용이라는 점을 상기하자.

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

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

 

---

유효범위(2)

유효범위의 효용

아래 두개의 예제는 변수 i를 지역변수로 사용했을 때와 전역변수로 사용했을 때의 차이점을 보여준다.

전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 의도하지 않은 문제를 발생시킨다.

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

// 본예제는 무한반복을 발생시킨다. 결과는 로딩바가 끝나지않고, 브라우저가 다운된다.

↑ 결과가 나오지 못하는 이유는?:

for문 안에 있는 i값이 var i 는 어떤 함수에 소속된 것이 아니라, i는 전역변수가 되었다.

a()라는 함수를 호출하게되면 , 변수 i 가 var가 붙어있지 않아, 전역번수가 된다.

a()가 실행될때마다 var i의 값은 0으로 초기화가 되기때문에 결코 i의 값은 5보다 커지지 않게 되는것으로 루프는 무한반복된다.

​

이러한 문제를 완화하기위해서 나온 개념이 지역변수, 전역변수 라는 유효범위라는 것이다.

전역변수, 지역변수는 디렉토리와 같은 것.(파일들을 묶어주는 디렉토리라는 개념 - 서로다른 디렉토리에선 같은 파일이 충돌되지 않는다)

---

유효범위(3)

전역변수를 사용하는 법

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

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 - 어떤함수에 소속되지않아 전역변수가 된다. 그리고 이 변수의 값은 객체이다.

그객체에 calculator라는 속성(객체안에들어있는 변수)값으로는 다시 객체가 오고 left, right 이다

​

전역변수 하나조차도 사용하고 싶지 않은 경우에는 ↓

(function myappfn(){
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는 전역변수가 아니라 function이라는 함수의 지역변수가 된다.

익명함수를 호출 하게 되는 것.

---

유효범위(4)

유효범위의 대상

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

많은 언어들이 블록(대체로 {,})에 대한 유효범위를 제공하는 것과 다른 점이다

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

//결과는 coding everybody

↑자바스크립트에서는 함수에 중괄호{} 안에서 선언된 변수만이 그 함수안에서의 지역변수가 되는 것.

for 문이나 if 문안에서 선언된 변수는 지역변수로서의 의미를 갖지 않는다.

​

↓ 하지만 자바에서는 아래의 코드는 허용되지 않는다.

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

name은 지역변수로 for 문 안에서 선언 되었는데 이를 for문 밖에서 호출하고 있기 때문이다.

---

유효범위(5)

정적 유효 범위

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

이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)(어휘적)이라고 한다.

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

//결과는 5이다.

i가 누구인가. a()라고하는 함수를 호출했을때, 지역변수 i 값은 10

b()라고하는 함수안에 i 는 지역변수가 존재하지 않아서 전역변수 var i = 5; 가 사용된다.

​

사용될때가아니고, 정의될때의 전역변수가 사용되게 된다. = 정적유효범위

b(); 는 동적인 유효범위가 된다.