Scope(유효범위)

Scope(유효 범위)는 변수에 접근할 수 있는 '범위'를 뜻한다.

scope는 global scope(전역 범위)와 local scope(지역범위)로 나눌 수 있다.

//global scope를 가지는 변수 vscope
var vscope = "global";

function fscope() {
  //local scope를 가지는 변수 vscope
  var vscope = "local"
  console.log(vscope)
}

fscope();
console.log(vscope);

//local
//global

//global scope를 가지는 변수 vscope
var vscope = "global";

function fscope() {
  //var을 사용하지 않고 변수를 선언할 경우 global scope를 가지게 된다.
  //vscope의 값이 'global'에서 'local'로 변경된다.
  vscope = "local"
  console.log(vscope)
}

fscope();
console.log(vscope);

//local
//local

*자바스크립트의 지역변수는 함수에서만 유효하다. 즉, for문 혹은 if문과 같은 블록단위의 코드 내에서는 지역변수 선언이 불가하다.

==> 정확히는 var을 사용할 경우 함수에서만 유효하다. (함수 레벨 scope) 

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

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

 

ES6(ECMAScript6)이전, 모든 변수는 var을 이용하여 선언하였다.

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;
}
console.log(sum());

//30

 

좋은 scopping 습관

global 변수가 여기저기서 수정되면 안 되기 때문에 변수들은 block scope으로 최대한 나눠놔야 한다.

타이트한 scope(tightly scoping)의 변수는 코드 품질을 올려준다.

• 코드가 block으로 명확하게 구분되기 때문에 코드 가독성이 올라간다.
• 코드가 한줄한줄 쭉 나열된 것이 아니라 각각의 기능별로 block을 나누면 코드가 이해하기 쉬워진다.
• 나중에 코드를 수정할 일이 있을 때, 코드를 오랜만에 보더라도 잘 나뉘어 있어서 유지보수가 쉬워진다.
• 프로그램이 끝날때까지 변수가 살아있는 것이 아니라서(block이 끝나면 local 변수의 삶이 끝나서) 메모리가 절약된다.

---