본문 바로가기

KnP House for Daily

[ES6] Scope Chain 이란? 본문

Web/ES6

[ES6] Scope Chain 이란?

K.ung 2016.11.28 14:08

Scope chain 이란?

자바스크립트의 여러 중요한 개념중 하나인 scope chain 에 대해 개괄적인 내용을 담고자 합니다.
scope 개념은 알고 있다는 전제로 설명합니다.

시작하기 전에..

function a(){
 var a = 1;               (A)
 function b(){
  console.log(a);  (B)
 }
 b();
}
a();

위 코드라인 (B)를 보면 b() 함수내에 선언하지 않은 a 변수에 접근하여 로그를 찍으력 합니다. 
자 과연 어떤 결과가 나올까요?

1 

결과는 a()에 변수 a값을 출력하였습니다.

함수 b()에 선언도 안되있는 외부에 있는 변수 a 값을 출력 할 수 있었을까요?

여기서 scope chain 의 개념을 집어넣으면 설명이 됩니다.

scope chain 이란?

scope chain 의 영어적 해석을 보면

  • scope
    • 범위 etc..
  • chain
    • 사슬 , 연쇄, etc..

범위 연쇄 라고 언어적으로 해석 할 수 있습니다. 한국말로 해석된 말을 의미 유추해보면 어떤 범위안에 범위안에 범위에 연쇄적으로 사슬과 같이 올라간다 라고 유추 할 수 있을거 같습니다.(너무 억지같은...?)

그럼 이제 개발자 스럽게 접근해보겠습니다.

자바스크립트는 실행시점에 Excecution Context(EC)가 생성이되고, 그 시점에 온갖 잡다한 행위들이 이뤄집니다.(예를들어 Hoisting)

function a(){
 var a = 1;               (A)
 function b(){
  console.log(a);  (B)
 }
 b();
}
a();

다시 코드를 보면 a(), b() 가 실행되면서 생성된 EC에 의해서 b() 함수내 변수 a를 탐색하기 시작하는데, 만약 함수 b()에 변수 a 가 없다면 함수 b()를 감싸고 있는 외부함수 a() 를 탐색하게 됩니다. 이때 변수 a가 존재하면 a를 참조하게 되고, 혹시 없다면 계속적으로 감싸고 있는 상위 함수를 탐색하는 과정을 거칩니다.
결국 찾지 못하고 root 인 Global Object EC까지 오게 되고 탐색하는 a가 없다고 VM500:1 Uncaught ReferenceError: a is not defined라는 자주보는 에러를 뿜어내게 됩니다.

한마디로 scope chain 은

  • Identifiers(식별자)를 찾는 일련의 과정

입니다.

추가적으로 scope chain은 Identifiers(식별자)를 찾는 거지, 어떤 객체의 property(속성)를 찾는 과정이 아닙니다. (<= 이것은 프로토타입 체인)

내부 작동방식

자바스크립트는 ES6로 넘어오면서 기존 ES3 ~ ES5와 다르게 내부 구현이 바뀌었습니다.

내부구조
< 내부구조 >

함수 a()가 실행이 되면 Execution Context(EC) 생성되고 Lexical Environment가 생성시점의 함수 a() 의 정보를 담기며 생성이 됩니다. 
함수 생성시점에 평가된 EC b()EC a()와 Global 이 생성되면서 outer Lexical Environment에 의해서 연결이 되어집니다.

자 그래서 이 시점에 정리를 할 수 가 있습니다.

함수가 생성되면 Execution Context 가 생성되고, 그리하여 Lexical Environment 가 내 outer Lexical Environment 가 상위 Environment Record 와 연결되면서 내부 함수 정보를 탐색할 수 있게 됩니다.
그리하여 b()함수 내 변수 a가 함수 a() 내 변수 a를 참조하여 에러 없이 결과출력이 가능하게 됩니다.

이것이 바로 Scope Chain 입니다.


저작자 표시
신고

'Web > ES6' 카테고리의 다른 글

[ES6] Clojure 이해하기  (0) 2016.11.28
[ES6] Scope Chain 이란?  (0) 2016.11.28
[ES6] Proxy API  (0) 2016.06.14
[ES6] WeakMap/Set  (0) 2016.06.14
[ES6] Generator에 관하여  (0) 2016.06.14
[ES6] Iteration 의 iterator, iterable 규약  (0) 2016.06.14
0 Comments
댓글쓰기 폼

티스토리 툴바