[JavaScript] scope, scope chain

🎈 스코프(scope)

식별자에 대한 유효범위.

ex) 어떤 경계 A의 외부에서 선언한 변수는 A의 외부뿐 아니라 A의 내부에서도 접근이 가능하지만, A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근할 수 있다.

scope의 개념은 대부분의 언어에 존재한다. 다만 ES5까지의 자바스크립트는 특이하게도 전역공간을 제외하면 오직 함수에 의해서만 scope가 생성된다.

 

🎈 스코프 체인(scope chain)

scope를 안에서부터 바깥으로 차례로 검색해나가는 것

여러 scope에서 동일한 식별자를 선언한 경우에는 무조건 scope chain 상에서 가장 먼저 발견된 식별자에만 접근 가능하게 된다.

 

 

스코프 체인 예제

var a = 1; var outer = function () { var inner = function () { console.log(a); // undefined var a = 3; } inner(); console.log(a); // 1 }; outer(); console.log(a); // 1

또한 스코프 체인 상에 있는 변수라고 해서 무조건 접근 가능한 것은 아니다. 위 코드상의 식별자 a는 전역 공간에서도 선언했고 inner 함수 내부에서도 선언했다.
즉 inner 함수 내부에서 a 변수를 선언했기 때문에 전역 공간에서 선언한 동일한 이름의 a 변수에는 접근할 수 없는 셈이다. 이를 변수 은닉화라고 한다.

 

 

 

스코프 체인을 확인하는 방법은 console.dir을 사용하는 방법과 디버거(debugger)를 사용하는 방법이 있다. 디버거를 이용하면 좀 더 제대로 된 정보를 확인할 수 있다.

// console.dir을 사용하는 방법
var a = 1;
var outer = function () {
  var b = 2;
  var inner = function () {
    console.log(b);  
    console.dir(inner);
  }
  inner(); 
};
outer();

// debugger을 사용하는 방법
var a = 1;
var outer = function () {
  var b = 2;
  var inner = function () {
    console.log(b);  
    debugger();
  }
  inner(); 
};
outer();