[JS][함수 vs 블록 스코프] 함수 기반 스코프

함수 vs 블록 스코프

앞에서 살펴 본 것처럼 스코프는 컨테이너 또는 바구니 구실을 하는 일련의 '버블'이고 변수나 함수 같은 확인자가 그 안에서 선언된다. 이 버블은 경계가 분명하게 중첩되고, 그 경계는 개발자가 코드를 작성할 때 결정된다.

그렇다면 정확히 어떤 것이 새로운 버블을 만들까? 함수만 버블을 만들까? 자바스크립트의 다른 자료 구조는 스코프 버블을 생성하지 못할가?

함수 기반 스코프

앞의 질문에 대한 가장 일반적인 답변은 자바스크립트가 함수 기반 스코프르 사용하기 때문이라는 것이다. 즉, 각각의 선언된 함수는 저마다의 버블을 생성하지만 다른 어떤 자료 구조도 자체적인 스코프를 생성하지 않는다는 것이다. 물론 사실은 아니다. 먼저 함수 스코프와 그 암시적 용례를 살펴보자.

function foo(a) {
  var b = 2;
  // ...

  function bar() {
    /// ...
  }

  // ...

  var c = 3;
}

 

앞의 코드에서 foo()의 스코프 버블은 확인자. a, b, c와 bar를 포함한다. 선언문이 스코프 어디에 있는지는 중요하지 않다. 스코프 안에 있는 모든 변수와 함수는 그 스코프 버블에 속한다.

bar()는 자체 스코프 버블이 있고 글로벌 스코프도 마찬가지다. 그리고 글로벌 스코프에는 하나의 확인자가 있는데 바로 foo다.

a, b, c, bar 모두 foo()의 스코프 버블에 속하므로 foo() 바깥에서는 이들에게 접근할 수 없다. 따라서 다음 코드는 호출된 확인자가 글로벌 스코프에는 없기 때문에 ReferenceError오류를 발생시킨다.

bar();
console.log(a, b, c);

 

하지만 이 모든 확인자. (a, b, c, bar, foo)는 foo()안에서 접근할 수 있고, bar() 안에서도 이용할 수 있다.

함수 스코프는 모든 변수가 함수에 속하고 함수 전체에 걸쳐 사용되며 재사용된다는 개념을 확고하게 한다. 이런 디자인 접근법은 상당히 유용하고 자바스크립트 변수의 '동적' 특성을 완전히 살려 다른 타입의 값을 필요에 따라 가져올 수 있지만, 스코프 전체에서 변수가 살아있다는 점이 예상치 못한 문제를 일으킬 수도 있다.

 

---

참고

• You Don't Know JS - 타입과 문법, 스코프와 클로저( 한빛 미디어 )