[4 Week] 변수 스코프

변수 스코프

---

자바스크립트의 변수 관리를 잘 이해하면 자바스크립트에서 혼란스럽거나 예민한 부분을 이해 할수 있습니다.

변수 관리 메커니즘과 관련된 개념

• 변수 스코프 체인
• 클로저
• 함수 또는 객체를 생성하는 클로저
• 모듈패턴
• jQuery 코드 구조

를 쉽게 이해할수 있습니다.

1. 함수 단위의 변수 관리

다른 프로그래밍 언어에서는 중괄호를 사용해 변수 영역을 결정하나

자바 스크립트 에서는 함수 단위로 변수 스코프가 정의됩니다.

val a = 1;

function f(){

    if(true){

         var c= 2;

     }

    return c; // if 문 블록에 정의된 변수 c를 반환 합니다.

}

f(); // 2를 반환 합니다.

> if 문 블록 외부의 함수 코드에서 c에 접근 가능합니다.

var 없이 변수를 정의하면 파싱 단계각 아니라 런타임에 전역 변수 스코프로 정의 됩니다.

function f(){

    g = "global1"; // var가 없으므로 전역변수에 해당합니다.

}

f();

alert(g);

var를 사용하지 않고 이용했을 때 위험하니 되도록이면 사용하지 맙시다.!!

---

2. 변수 스코프 객체

함수의 호출 인자 ,매개변수 , 그리고 파싱후에 얻게 되는 함수 내부변수에 대한 값을 관리하는 객체

해당 함수의 지역변수를 관리하는 객체

function f(){

    var a = 1;

    return a;

};

f();

• 변수 스코프 == 객체

function f(x ,y){

    var a = x + y;

    return a;

}

var r = add(1,2,3);

/*

생성되는 변수 스코프 객체

arguments = [1,2,3]

x : 1

y : 2

a : undefined

*/

• 변수 스코프 객체의 특징
  • 해당 함수의 외부에서는 접근 할수 없다.

---

3. 렉시컬 특성

렉시컬(lexical) = 단위, 어휘와 관련 있다. == 코드와 관련돼 있음을 의미합니다.

변수를 검색할 때 함수가 실행되는 환경을 근거로 판단하는 것이 아니라 함수를 정의한 코드의 문맥을 근거로 판단한다.

var x = "global";

function f(){

    alert(x);  //undefined 출력

    var x = "local"; // x 변수 선언

    alert(x); // "local" 출력

}

f();

• 파싱 결과
  • 루트객체
    • x : undefined
    • f : 함수 f
  • 함수 f
    • x : undefined
    • alert();
    • x = “local”
    • alert();
  • 실행 환경
    • x = “global”
    • f();

"실행 시" 각 문장이 참조하는 변수는 렉시컬 환경에서 정의한 즉 "코드 그대로의 환경"을 기준으로 정의한 변수 스코프에서 검색한다.

파싱단계와 실행 단계각 분리돼 있고 함수 단위의 렉시컬한 변수 스코프가 존재한다는 것에 주의해야 합니다.

---

4. 변수 스코프 체인

중첩 함수를 사용할 경우 함수별로 생성되는 변수 스코프 객체 간에는 부모, 자식 관게가 만들어 지는 것을 변수 스코프 체인이라고 합니다.

렉시컬 코드를 기준으로 변수를 찾을 경우 자식에서 부모순으로 찾는다.!

var x = 1;

function outer(){

    var y = 2;

    function inner(){

          var z = 3;

          var a = x;

     }

}

outer();

• 실행할 경우 a=x 코드는 inner => outer => window( root) 를 거치면서 x 의값을 찾습니다. 이것을 변수 스코프 체인이라고 합니다.

---

5. 루트 객체

> 전역 변수 스코프를 나타내는 객체로, == 전역 객체와 같은 표현 입니다.

> 런타임에 전역 변수 스코프는

전역 변수 스코프의 코드에서는 this는 루트 객체를 참조합니다.

this.Infinity

this.undefined

this.NaN

...

// 내장 객체(내장 생성자) 정의

...

this.Object = function(...){...}

this.Array = function(...){...}

this.Function = function(...){...}

this.RegExp = function(...){...}

...

//전역 함수(global function) 정의

...

this.parseInt = function(...){...}

this.encodeURI = function(...){...}

this.decodeURI = function(...){...}

tip) 전역 변수 스코프에 정의된 함수 및 속성을 코드에서 사용할 때는 this를 생략할수 있습니다. 루트 객체에는 생성자가 없습니다. new Window() 로 생성 불가능 합니다.

var o = new this.Object() ==> var o = new Object();

// 함수의 변수 스코프 객체에서 Object를 찾지 못하면 변수 스코프 체인에 의해 상의로 올라가 결국엔

//전역변수 스코프 객체에 까지 찾아갑니다.

---

6. 클로저

클로저라는 개념은 자바스크립트에는 없는 class의 역할을 대신 해 비공개 속성/메서드, 공개 속성/메서드를 구현할수 있는 근거를 마련해주고,

객체 지향적인 특징인 캡슐화와 정보은닉을 가능하게 해줍니다.

jQuery 에서 많이 사용하는 패턴입니다.

---

​