JavaScript) Scope (유효범위)

• 다른 언어와 다른부분이 있어 주의.
• 링크의 자료를 보고 정확히 이해하기.

유효범위 - 생활코딩
Javascript Scope (유효범위)

JavaScript Scope의 주요 특징

1. 함수단위의 유효범위 (function-level scope)
2. 암묵적 전역 (implied global)
3. Static(Lexical) Scoping

---

1. 함수단위의 유효범위 (function-level scope)

function-level scope : var
block-level scope : let, const (ES6=ECMAScript2015에서 추가됨)

다른 언어들과의 차이 (JS의 지역변수는 함수에서만 유효하다)

아래의 '2) 암묵적 전역'과 헷깔리지말자. 한마디로 정리하면,
'암묵적 전역'개념은 x=1처럼 var키워드를 붙이지않고 생성/선언시 global(전역)으로 선언된다는것이고,
'함수단위의 유효범위'개념은 JS에서 지역변수는 함수안에서만 생성할수있다는것이다. 즉, 아래 '3) Static Scoping'의 코드에서 x도 var선언을 했지만 함수밖에서 생성하였으므로, x는 전역변수라는 것이다. 헷깔리지말자.

2. 암묵적 전역 (implied global)

scope를 선언하지않고, x=6과 같이 곧바로 사용해버리면 암묵적으로 Global로 선언된다.
전역변수는 외부의 다른 동명의 변수에 영향을 줄수있어, 버그를 발생시키기 쉬우니 가급적 var 등을 사용하자.

3. Static(Lexical) Scoping

JS는 함수가 선언된 시점의 유효범위를 갖는다.

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  document.write(x);
}

foo(); // ?
bar(); // ?

foo()와 bar() 모두 1을 출력한다.
함수가 호출(사용)될때가 아닌, 선언(정의)됬을때의 유효범위를 갖기 때문 !! 함수bar()를 정의한다 > document.write함수가 있다 > x를 출력해야하는데, 찾아보니 bar()함수안에 x가 정의되지않았다. 따라서 x는 전역변수 > 전역변수x에는 1이 들어있으므로 결과적으로 1을 출력.

---

=> 때문에 전역변수 사용을 억제하기 위해,

1. 전역변수 객체를 하나 만들어서 속성으로 관리해 사용하거나
2. 익명함수 / 즉시실행함수(IIFE, Immediately-Invoked Function Expression)를 사용한다.

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

calculator의 left와 coordinate의 left는 이름이 곂치지만 걱정할일 없음.
MYAPP이라는 전역변수 객체를 하나 만든뒤 내가 사용할 변수들을 이 안에서 (내 전역객체변수의 소속으로) 만들어 사용하면, 곂칠 걱정이 줄어든다.

(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이라는 하나의 전역변수도 원하지않는다면, 위와 같이 익명함수로 만들어 사용한다.

로직 전체를 함수로 묶어서 만들면, MYAPP은 더이상 전역변수가 아닌 '함수의 지역변수'가 된다.
function myappFn() {
// 로직..
} myappFn();
대신, myappFn함수가 전역변수가 되버린다.(myappFn이라는 변수안에 함수가 들어있는것) 따라서 함수 정의후 바로 호출하도록, 익명함수로 변경하여 사용한다.
(function myappFn() {
// 로직..
}());
myappFn();

(완성된 위의 예제 코드)