2oneweek.dev

03. Identifier Resolution과 Scope

    Tags

  • JavaScript
03. Identifier Resolution과 Scope thumbnail

Identifier Resolution 식별자 해결/결정

  • 사용할 변수/함수를 결정하는 것이다.
  • var point = 100 function getPoint(){ var point = 200; return point } var result = getPoint() console.log(result) getPoint함수를 호출하게 되면 엔진 컨트롤이 getPoint 내부로 들어가고 point 변수라는 이름을 선언하고 200을 할당하지만, getPoint 외부에도 point 변수가 있지만, return 값은 200이다. 그 이유는 getPoint의 {} 스코프(Scope)가 정해져 있기 때문이다. 신속하고 정확한 검색을 위해 Scope가 필요하다.
    • 이처럼 엔진은 Scope 안에서 먼저 찾게되는 변수의 값을 사용하게 된다. getPoint Scope에 point 변수가 없으면 바로 위의 Scope에서 찾게된다.
      • 이 Scope의 순회는 제일 상위 Scope까지 진행된다.
  • Scope에서 이름을 찾기 위해, Scope에 변수나 함수의 이름을 설정해둔다. 그러나 Scope에 설정된 것에서 값은 변경되지만 이름은 변경되지 않는다.
  • 그래서 식별자 해결 대상은 이름이다. 즉, 변수나 함수의 이름을 찾는 것이 Identifier Resolution이다.


Scope의 용도

  • Scope는 식별자 해결을 위한 수단과 방법을 말하는 것이지 Scope를 만드는 것 자체가 목적이 아니다. Scope 때문에 식별자가 있는 것이 아니다.
  • point 변수의 값을 구하기 위해서, Scope에서 point라는 이름을 찾고 그 값을 가져오게 된다.
  • 만약 Javascript의 식별자(변수명)가 모두 유일하다면 Scope는 필요 없게 된다. 그런데 그럴 일이 없으므로 Scope가 필요한 것


Scope Chain

  • ES3에 정의된 Scope Chain의 정의 : 실행 컨텍스트와 관련이 있으며, 식별자 해결/결정을 위해 사용된다.
    • ES5에선, 식별자 해결/결정(Identifier Resolution)에 있어 Scope를 사용하지만, Scope Chain을 사용하지는 않는다.
  • Scope Chain은 식별자를 검색하기 위한, {name : value}와 같은 K/V 형태의 오브젝트의 리스트다.

Scope Chain의 생성

  1. 함수가 호출되면 Scope를 생성하고, 함수 내부의 변수와 함수를 {name:value}형태로 설정한다.
  2. 생성한 Scope를 Scope Chain에 연결하고, Scope Chain을 Identifier Resolution에 이용한다.
  • ES3의 Scope Chain에서는 위의 작업을 동적으로 수행한다. 함수가 새로 생성될 때마다 Scope Chain이 동적으로 바뀐다.

    • ES5는 Lexical Environment(정적 환경)을 사용한다. 함수가 "호출"되면 미리 환경을 다 만들어두고, 실행을 시작한다. 즉 es5는 하나의 컨텍스트 안에서 모든걸 처리하는 것이다.
    • ES3의 Scope Chain는 함수 생성시에 Scope를 만들어서 Scope Chain에 연결한 후에, 식별자 해결을 수행한다.
    1. ES3의 실행 컨텍스트 환경
    • Scope Chain
    • Activation Object: 함수가 실행될 때 필요한 환경과 함수의 결과를 저장
    1. ES5의 실행 컨텍스트 환경
    • Lexical Environment: es3의 Activation Object에 대응하는 것이며, Scope Chain는 사라졌다.

ES3와 ES5의 실행 컨텍스트 환경 차이

  1. ES3에서는 함수가 호출되었을 때 함수 내에 위치한 변수와 함수 이름을 scope chain에 바인드한다.

  2. ES5에서는 Scope Chain 형태를 렉시컬 환경 컴포넌트(LEC - Lexical Environment Component)안의 선언적 환경 레코드(DER - Declarative Environment Record)로 대치한다. 함수가 호출되었을 때 함수 내에 위치한 변수와 함수 이름을 선언적 환경 레코드에 바인드한다는 것이다.

  • 즉 es5는 하나의 Context에 함수 실행에 필요한 모든 정보를 저장하는 것이라면, es3는 Scope Chain이라는 별도의 자료구조를 두고 있는 것이다. es3에서는 activation object와 scope chain 두개를 이용해서 함수를 처리해야 된다. 따라서 es3에서는 context가 존재한다고 말하기 애매하다.
  • 함수가 실행되기 위해 메모리에 올라갈 때, es5는 context 하나만 로드되면 되고, es3에서는 activation object와 scope chain 두 개가 로드되어야 된다. es5의 Lexical Environment 덕분에 엔진의 속도가 비약적으로 상승할 수 있었다.(물론 그에 맞게 코드를 작성해야 된다.)
Written by@2-one-week
현재 블로그 개발 중

GitHubLinkedIn