[자바스크립트] 스코프

스코프

스코프란 식별자에 대한 유효범위를 말합니다. 어떤 경계 A의 외부 뿐만 아니라 A의 내부에서도 접근이 가능하지만, A 내부에서 선언한 변수는 오직 A 내부에서만 접근이 가능합니다.

함수 스코프

이러한 스코프의 개념은 대부분의 프로그래밍 언어에 존재하는데, ES5까지의 자바스크립트는 특이하게 전역 공간을 제외하면 오직 함수에 의해서만 스코프가 생성되었습니다. 이러한 스코프는 함수 스코프라고 합니다.

블록 스코프

다행히 ES6에서는 블록에 의해서도 스코프 경계가 발생하게 되면서 다른 언어와 비슷해졌습니다. 이러한 스코프는 함수 스코프와 구분하기 위해 블록 스코프라고 합니다.

다만 이러한 블록은 var 키워드로 선언된 변수에 대해서만 작용하지 않고 새로 생긴 let, const, class, strict mode에서의 함수 선언 등에 대해서만 스코프로서의 역할을 수행합니다.

스코프 체인

식별자의 유효범위를 안에서부터 바깥으로 차례대로 검색하는 것을 스코프 체인이라고 합니다.
LexicalEnvironment의 두 번째 수집자료인 outer-EnvironmentReference이 이러한 스코프 체인을 가능하게 합니다.

변수 은닉화 Variable Shadowing

한편 스코프 체인 상에 있는 변수라 해서 무조건 접근이 가능한 것은 아닙니다. 전역 공간에서 선언한 식별자와 함수 내부에서 선언된 식별자 이름이 동일할 때, 함수 내부에서 선언된 식별자를 사용하기 때문에 전역 공간에서 선언한 동일한 이름의 식별자에는 접근이 안됩니다.
이러한 현상을 변수 은닉화라고 합니다.

스코프 체인 확인

크롬 브라우저 환경에서는 스코프 체인 중 현재 실행 컨택스트를 제외한 상위 스코프 정보들을 개발자 도구의 콘솔창을 통해 확인할 수 있습니다. 함수 내부에서 함수를 출력하면서 확인하면 됩니다.

var a = 1;
var outer = function() {
  var b = 2;
  var inner = function() {
    console.log(b);
    console.dir(inner);
  };
  inner();
};
outer();

디버거를 사용하면 좀 더 제대로 된 정보 확인이 가능합니다. console.dir() 대신 debugger로 변경하면 됩니다.

var a = 1;
var outer = function() {
  var b = 2;
  var inner = function() {
    console.log(b);
	debugger;
  };
  inner();
};
outer();