ES3 / ES5 스펙의 아키텍처, 메커니즘

---

ES3 스펙

10. Excution contexts(실행 콘텍스트)

함수가 실행되었을 때 결과를 저장하는 영역이자, 함수가 호출 되었을 때 모든 처리가 안에서 이루어집니다. 실행하는 묶음의 개념

1. 정의

1. function object : JS 엔진이 fuction 키워드를 만났을 때 만들게 되는 object
2. 실행가능 코드의 종류
   1) Global code(window)
   2) Eval code(evaluate 함수를 적용한 동적 코드)
   3) Function code
   : Global과 Function 코드의 실행 영역이 다르기에 분류
3. 변수의 인스턴스화
4. 스코프 체인과 식별자 해결 : 함수를 호출/변수의 값을 설정할 때, 어떻게 함수/변수의 이름을 찾을 것인지?
5. Global Object
6. activation object : 함수가 호출되었을 때 함수를 실행할 수 있는 환경, 실행 결과를 저장하는 object
7. this : 인스턴스 내 참조 대상 처리
8. arguments object : 함수의 parameter 처리

---

ES5 스펙

10. Excution contexts & Excutable(실행 & 실행가능 콘텍스트)

함수가 실행되었을 때 결과를 저장하는 영역이자, 함수가 호출 되었을 때 모든 처리가 안에서 이루어집니다. 실행하는 묶음의 개념
1. 실행가능 코드의 종류

• strict 모드

2. lexical environments(정적환경)
   : 실행 콘텍스트 안에서 환경적인 측면 처리
   1) Environment Records : 함수가 실행되기 전에 상황을 기록
   2) lexicla environment operations : 변수에 값을 할당했을 때 정적인 환경에 이를 설정
   3) the global environment : Global object 처리 환경
3. 식별자 해결
   : 함수를 호출/변수의 값을 설정할 때, 어떻게 함수/변수의 이름을 찾을 것인지?, 바탕의 개념
4. 실행 콘텍스트의 정립
   : 함수 안으로 엔진의 콘트롤이 이동했을 경우, 함수 안에 작성된 코드를 어떻게 처리할 것인지
   1) Global
   2) Eval
   3) Function
5. declaration binding instantiation(인스턴화 연결 선언)
   : 변수와 this와 관계
   함수 안/밖의 변수를 어떻게 실행 콘텍스트 환경과 묶을지 결정
   함수 밖의 object인 this를 어떻게 실행 콘텍스트 환경과 묶을지 결정
   렉시컬 환경에 기록
6. argument object
   : 함수의 parameter 처리

---

엔진 관점의 핵심 키워드

실행 콘텍스트(Excution Context)
함수가 호출되었을 때, 함수라는 단위를 어떤 묶음으로 가져갈 것인가를 결정하여 하나의 컨텍스트 안에 함수에서 발생할 수 있는 모든 것을 통합하여 묶습니다. 함수가 실행되기 전, 호출 후 어떻게 처리할 것인지가 중점입니다.

• 해석(Context) : 컴파일, 실행 환경 설정, 실행 환경을 만드는 것은 호출 전/후 가능
• 실행(Excution) : 해석 단계에서 설정된 환경을 바탕으로 코드를 실행, 호출 후에만 가능

식별자 해결(Identifier Resolution)
실행 콘텍스트, 즉 한 곳에 정보를 묶어서 만드는 목적입니다. 잘 정리된 실행 콘텍스트로 효율적인 식별자 해결(검색)을 통하여, 스코프 및 함수형 프로그래밍에 있어서 보다 빠르게 처리(실행)가 가능해집니다.

• 함수가 호출 시 함수 이름을 찾는데, 분산되어 있다면 처리와 검색에 있어서 비효율적
• 변수가 외부에 있을 경우, 관련 콘텍스트를 다시 스코프 잡는데 있어서 비효율적(스코프 체인)
• ES3 : 스코프 체인 → ES5 : 렉시컬 환경, 묶음의 단위가 확장되어 한 곳에 스코프하여 효율성을 달성

---

실행 콘텍스트 형태

function book(){
  var point = 123;
  function show(){
    var title = "JS책";
    // getPoint();
    // this.bookAmount
  };
  function getPoint() {
    return point;
  };
  show();
};
book();

show 실행 콘텍스트(EC): {
  렉시컬 환경 컴포넌트(LEC): {
    환경 레코드(ER): {
      선언적 환경 레코드(DER): {
        title: "JS책"
      },
      오브젝트 환경 레코드(OER): {}
    },
    외부 렉시컬 환경 참조(OLER): {
      point: 123,
      getPoint: function(){}
    }
  },
  변수 환경 컴포넌트(VEC): {},
  this 바인딩 컴포넌트(TBC): {
    글로벌 오브젝트(window)
  }
}

1. book()함수가 호출되면 show Function 오브젝트 생성, show의 [[scope]]에 스코프 설정(show가 속한 범위)
2. show() 함수가 호출되면 EC 생성
   함수 실행을 위한 Context 환경 구축(LEC, VEC, TBC)
   렉시컬 환경 컴포넌트 내 환경 레코드에 show() 안의 변수, 함수 기록
   렉시컬 환경 컴포넌트 내 외부 렉시컬 환경 참조에 show() 밖의 변수, 함수 기록
3. this 바인딩 컴포넌트에 this 참조 설정
   show() 앞에 작성한 object를 설정

즉, 실행 콘텍스트 안에 함수에서 구할 수 있는 값의 덩어리(정적 환경)를 만들어두면서, 함수가 메모리에 올라가 실행 될 때 메모리를 빠져나가거나 이동하거나 하지않고(scope 고정) 안에서 처리할 수 있게 됩니다. 따라서 환경에 맞춰서 코딩을 하게 되었을 경우 효율성이 올라갑니다.

---

식별자 해결

var point = 100;
function getPoint() {
  var point = 200;
  return point;
};
var result = getPoint();
console.log(result);
// 200

식별자 해결은 사용할 변수/함수를 결정하는 것으로 이를 위해 참조 대상 식별자를 찾아내기 위한 유효범위인 scope가 필요합니다. 값은 변경되지만 이름은 변경되지 않기에 식별자 해결대상은 이름으로 합니다. 이름을 찾기 위해 scope에 이름을 설정하고 일치하는 식별자를 찾아 결정합니다.

식별자가 유일하면 스코프는 필요하지 않지만, 유일하게만 작성하는 것은 불가능(시멘틱적 한계 발생)하기에 scope를 통하여 식별자를 찾아내어 결정합니다.

---

스코프 체인

ES3의 스펙에서 실행콘텍스트와 관련이 있으며. 식별자 해결을 위해 사용됩니다. 식별자를 검색하기 위한 다수의 {name:value} 계층적인 연결 리스트입니다. 연결리스트를 통하여 해당 식별자가 없으면 계속적으로 감싸고 있는 상위 함수를 탐색하는 과정을 거칩니다.

함수가 호출되면 scope를 생성하고 함수 내 변수와 함수를 {name:value} 형태로 설정합니다. 생성한 scope를 스코프 체인에 연결하고, 함수가 새로 생길 때 마다 스코프 체인에 연결하는 동적인 처리 + 내부 스코프 체인을 탐색하는 정적인 처리를 통하여 식별자를 해결합니다. 2번 처리하기 때문에, ES5 스펙의 정적인 환경보다는 비효율적입니다.

ES5에 와서 스코프 체인형태를 렉시컬 환경 형태의 선언적 환경 레코드에 함수 내 변수와 함수의 이름을 바인딩하는 것으로 대체하게 됩니다. 따라서 구조체에서 콘텍스트로 변경되게 되면서 보다 빠른 식별이 가능하게 되었습니다.

---

렉시컬 환경

function 키워드를 만나면 function 오브젝트를 생성하고 scope를 오브젝트의 [[scope]]에 설정합니다. 함수 밖의 스코프가 결정

함수가 호출되면 오브젝트의 [[scope]]를 실행 콘텍스트의 렉시컬 환경 컴포넌트의 외부 렉시컬 환경 참조에 설정, 함수 안/밖의 변수와 함수를 정적인 개념으로 사용이 가능

var 키워드 문제
함수에서 var 키워드를 사용하지 않고 변수를 선언하면 글로벌 오브젝트에 설정되는데, 이렇게 되면 스코프 체인 개념으로 전환(2단계 계층 → 여러단계 계층)

ES5에서 use strict를 사용하는 것으로 이를 보완하였고, ES6에서 변수 자체에 스코프 제약을 두는 let, const 키워드를 사용하여 보완하였습니다.

동적 환경
with문 : 반복할 때 마다 스코프 생성, strict 모드 에러
eval() : 문자열을 JS 엔진으로 실행할 때 스코프 생성, 보안 문제