[자바스크립트 스터디] Scope(스코프), Scope Chain(스코프 체인)

 

저번 글에서는 Hoisting(호이스팅)에 대해 알아봤다. 이번 시간에는 스코프와, 스코프 체인 그리고 그를 도와주는 outerEnvironmentReferenece에 대해 알아 볼 것이다. 먼저 스코프에 대해 알아보려고 한다. 

 

Scope(스코프)

var a = "Hello";

function outer() {
  console.log(a);
  
  function inner() {
    console.log(a);
  }
  var a = "bye";
  inner();
}
outer();
console.log(a);

 

스코프에 대해 먼저 알아보겠다. 스코프, 말 그대로 해석하자면 범위라는 뜻이다. JavaScript에서는 식별자의 범위라고 할 수 있다. 변수가 어디까지 유효하고 그 유효한 범위에 대해 접근 가능한 지에 대한 것이다. 스코프의 경우 크게 global scope와 local scope로 나뉘고, local scope는 다시금 function scope와 block scope로 나뉜다. 

 

코드의 스코프를 간단하게 그림을 통해 살펴보겠다.

 

 

위의 경우처럼 Function(Local) Scope 내에서는 해당하는 두번째 a 변수와 inner함수만 호출이 outer 함수 내에서만 가능하다. 하지만, outer 함수와 outer 함수 바깥의 첫번째 a 변수는 어디서든 호출이 가능하다. 그치만 이상하다, inner함수의 경우 a가 정의되어 있지 않았는데도 외부의 변수 a를 참조할 수 있었다. 이는 바로 Scope Chain과 그를 도와주는 outer Environment Reference의 도움으로 가능하다. 

 

outer Environment Reference의 경우 상위 환경에 대한 참조를 한다. 여기서 상위 환경이란 무엇일까? 바로 직전 컨텍스의 Lexical Environment이다. 이를 그림으로 한 번 살펴보겠다. 

 

 

위의 Lexical Environment끼리 연결되어 있는 것이 바로 Scope Chain이다. 스코프 체인은 결국 유효 범위 스코프를 한번 탐색하고 해당 변수나 함수가 없을 경우 외부 환경을 탐색해 나가면서 하나하나 찾아나가는 것이다. 최종적으로는 global environment에 당도하게 된다. 이는 코드에 console.dir(inner)를 넣어서 더욱 자세하게 파악할 수 있다.

var a = "Hello";

function outer() {
  console.log(a);
  
  function inner() {
    console.log(a);
    console.dir(inner);
  }
  var a = "bye";
  inner();
}
outer();
console.log(a);

 

 

 

 

 

여기서 주의할 점은 콜 스택 상에 쌓여있는 상위 순서대로 참조하는 것은 아니라는 것이다. Lexical Environment에서 Environment Record는 함수의 호출이 아닌 선언 당시의 환경을 파악한다. 즉, 선언 당시에 스코프 체인이 만들어 진다.

 

 실행 컨텍스트 - 코드 실행 전 코드에 대한 환경 정보 수집
콜스택에는 전역 실행 컨텍스트가 담기고 함수가 실행 혹은 호출될 때 마다 추가로 쌓인다.

 

 

var a = "1";
first();

function first() {
    var b = "2";
    second();

    function second() {
        var c = "3";
        third();
    }
}

function third() {
    var d = "4";
    console.log(a + b + c + d);
    console.dir(third)
}

 

위의 코드를 보겠다. 콜 스택 상에는 다음과 같이 쌓일 것이다. 하지만 Scope Chain은 오른쪽과 같이 구성된다.

 

그 이유인 즉슨, 이미 third()와 first()는 전역 함수로서 당시 선언된 전역 변수 상태의 정보만 담고 있어서 second와 first내의 변수 정보들에 대해서는 알 턱이 없다. 

 

다음 글에서는 closure(클로저)에 대해 더 자세히 알아보겠다.