---

소스코드의 타입

4가지 타입의 소스코드(실행가능한 코드) 는 타입에 따라 과정과 관리 내용의 차이가 있는 실행 컨텍스트를 생성한다.

1. 전역코드

• 전역 변수, 전역 함수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성한다.
• 전역 변수, 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩 하고 참조하기 위해 전역 객체와 연결되어야 한다.
• 이를 위해 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다.

2. 함수 코드

• 함수 코드는 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리 해야 한다.
• 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결 해야한다.
• 이를 위해 함수 코드가 평가되면 함수 실행 컨텍스트가 생성된다.

3. eval 코드

• strict mode에서 자신만의 독자적인 스코프를 생성한다.
• 이를 위해 eval 코드가 평가되면 eval 실행 컨텍스트가 생성된다.

4. 모듈 코드

• 모듈별로 독립적인 모듈 스코프를 생성한다
• 이를 위해 모듈 코드가 평가되면 모듈 실행 컨텍스트가 생성된다.

---

소스코드의 평가와 실행

• 소스코드는 실행에 앞서 평가 과정을 거치며 코드를 실행하기 위한 준비를 한다.
• 즉, 자바스크립트 엔진은 소스코드를 2개의 과정, 즉 소스코드의 평가와 소스코드의 실행 과정으로 나누어 처리한다.

평가

• 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프 (렉시컬 환경의 환경 레코드)에 등록한다.

실행

• 선언문을 제외한 소스코드가 순차적으로 실행되기 시작한다 (런타임)
• 변수나 함수의 참조(소스코드 실행에 필요한 정보) 를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다.
• 이후 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다.
  

예시1)

e.g.) var x ; x = 1;

1. 자바스크립트 엔진이 소스코드 평가 과정에서 변수 선언문 var x 를 먼저 실행한다
   1. 이때 생성된 변수 식별자 x는 실행 컨텍스트가 관리하는 스코프에 등록되고 undefined 로 초기화 된다.
2. 소스 코드 실행 과정에서 변수할당문이 실행된다. (이때 해당 변수가 선언된 변수인지 확인)
   1. 이때 실행 컨텍스트가 관리하는 스코프에 x 변수가 등록되어 있는지 확인한다.

예시2)

//전역변수
const x =1
const y =2 

//함수
function test(a){
...
console.log(a)
}

//함수 호출
test(100)

1. 전역 코드 평가
   • 전역 코드 평가 과정을 거치며 전역 코드를 실행하기 위한 준비를 한다.
   • 선언문만 먼저 실행된다.
   • 전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록된다.
2. 전역 코드 실행
   • 런타임이 시작되어 전역 코드가 순차적으로 실행되기 시작한다.
   • 전역 변수에 값이 할당되고 함수가 호출된다.
   • 함수가 호출되면 순차적으로 실행되던 전역 코드의 실행을 일시 중단하고 코드 실행 순서를 변경하여 함수 내부로 진입한다.
3. 함수 코드 평가
   • 함수 호출로 인해 코드 실행 순서가 변경되어 함수 내부로 진입한다
   • 함수 코드 또한 평가의 과정을 거쳐 매개변수와 지역 변수 선언문이 먼저 실행된다
   • 결과 생성된 매개변수와 지역 변수가 실행 컨텍스트가 관리하는 지역 스코프에 등록된다.
   • 함수 내부에서 지역 변수 처럼 사용할수 있는 arguments 객체가 생성되어 지역 스코프에 등록되고 this 바인딩도 결정된다.
4. 함수 코드 실행
   • 함수 평가 과정이 끝나고 런타임이 시작되어 함수 코드가 순차적으로 실행된다.
   • console.log 메서드가 호출되어 식별자인 console을 스코프 체인을 통해 검색한다
     • 이를 위해 함수 코드의 지역 스코프는 상위 스코프인 전역 스코프와 연결되어야 한다
     • 하지만 console은 스코프 체인이 아닌 전역 객체의 프로퍼티다,
     • 즉, 전역 객체의 프로퍼티가 마치 전역 변수처럼 전역 스코프를 통해 검색이 가능하다는 의미이다.

---

실행 컨텍스트의 역할

• 위의 예시 에서 보았듯, 코드가 실행되려면 스코프를 구분하여 식별자와 바인딩된 값이 관리되어야 한다.
• 중첩 관계에 의해 스코프 체인을 형성하여 식별자를 검색할 수 있어야 하고, 전역 객체의 프로퍼티도 전역 변수처럼 검색 할 수 있어야 한다.
• 함수 호출이 종료되면 함수 호출 이전으로 되돌아 가기위해 현재 실행중인 코드와 이전에 실행하던 코드를 구분하여 관리해야한다.

결론

• 코드가 실행되기 위해서는 스코프, 식별자, 코드 실행 순서 등의 관리가 필요한데, 이 모든것을 관리하는 것이 바로 실행 컨텍스트다.
• 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.
• 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고 코드 실행 순서는 실행 컨텍스트 스택으로 관리한다.

---

실행 컨텍스트 스택

위의 내용에서 소스코드가 평가과정을 거쳐서 실행 컨텍스트라는 것을 생성한다고 했다. 이때 생성된 실행 컨텍스트는 스택 자료구조인 실행 컨텍스트 스택으로 코드의 실행순서가 관리된다.

---

렉시컬 환경

식별자와 식별자에 바인딩 된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트다. 이를 통해 스코프와 식별자를 관리한다.

• 렉시컬 환경은 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 하는 렉시컬 스코프의 실체다.

실행 컨텍스트의 컴포넌트

• 실행 컨텍스트 생성 초기에 두 컴포넌트는 하나의 동일한 렉시컬 환경을 참조한다.
• 이후 상황에 따라 환경변수 컴포넌트를 위한 새로운 레시컬 환경을 생성하고, 이때부터 환경변수 컴포넌트와 렉시컬환경 컴포넌트의 내용이 다라지기도 한다.

lexicalEnviroment

• 렉시컬 환경 컴포넌트는 또 두가지로 구성되어있다.
• 환경 레코드 : 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소다
• 외부 렉시컬 환경에 대한 참조 : 상위 스코프를 가리킨다, 해당 실행 컨텍스트를 생성한 소스코드를 포함한 상위 코드의 렉시컬 환경을 의미한다. 외부 렉시컬 환경에 대한 참조를 통해 단방향 링크드 리스트인 스코프 체인을 구현한다.

---

실행 컨텍스트의 생성과 식별자 검색 과정

var x= 1
const y = 2

function test (a) {
...
}
test(20)

1. 전역 객체 생성

• 전역 객체는 전역 코드가 평가되기 이전에 생성된다.
• 전역 객체에는 빌트인 전역 프로퍼티와 빌트인 전역 함수, 표준 빌트인 객체가 추가된다. 동작환경에 따른 호스트 객체(Web Storage, Canvas ….) 도 포함된다.

2. 전역 코드 평가

• 소스 코드가 로드되면 자바스크립트 엔진은 전역 코드를 평가한다

1. 전역 실행 컨텍스트 생성
   • 비어있는 전역 실행 컨텍스트를 생성하여 실행 컨텍스트 스택에 푸시한다.
2. 전역 렉시컬 환경 생성
   • 전역 렉시컬 환경을 생성하고 전역 실행 컨텍스트에 바인딩 한다.
   1. 전역 환경 레코드 생성
      • 전역 환경 레코드는 객체 환경 레코드와 선언적 환경 레코드로 구성되어있다.
      1. 객체 환경 레코드 생성
         • 전역 코드 평가 과정에서 var 키워드로 선언한 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 환경 레코드의 객체 환경 레코드에 연결된 bindingObject를 통해 전역 객체의 프로퍼티와 메서드가 된다.
      2. 선언적 환경 레코드 생성
         • let, const 키워드로 선언한 전역 변수는 선언적 환경 레코드에 등록되고 관리된다.
         • let, const 는 변수 선언과 초기화 단계가 분리되어 진행되게 되기에, 런타임에 실행 흐름이 변수 선언문에 도달하기 전까지 일시적 사각지대에 빠지게 된다.
   2. this 바인딩
      • 전역 환경 레코드의 내부 슬롯에 this 가 바인딩 된다.
      • 전역 코드에서 this 는 일반적으로 전역 객체를 가리키므로 전역 환경 레코드의 내부슬롯에는 전역 객체가 바인딩 된다.
   3. 외부 렉시컬 환경에 대한 참조 결정
      • 상위 스코프를 가르켜, 이를 통해 단방향 링크드 리스트인 스코프 체인을 구현한다.
      • 전역 렉시컬 환경의 경우 외부 렉시컬 환경에 대한 참조는 Null 이 할당된다.

3. 전역 코드 실행

변수 할당문, 또는 함수 호출문을 실행하려면 먼저 변수 또는 함수 이름이 선언된 식별자인지 확인해야 한다

• 식별자 결정
  • 식별자는 스코프가 다르면 같은 이름을 가질수 있기에, 해당 식별자의 참조를 어느 스코프에서 하면 되는지 결정하는 식별자 결정 과정을 거친다.
  • 식별자를 검색할때는 실행 중인 실행 컨텍스트에서 식별자를 검색하기 시작한다.
    • 선언된 식별자는 실행 컨텍스트의 렉시컬 환경의 환경 레코드에 등록되어 있다.
  • 만약 실행중인 컨텍스트의 렉시컬 환경에서 식별자를 검색할 수 없으면 외부 렉시컬 환경을 참조하여 식별자를 검색한다 ⇒ 스코프 체인의 동작 원리
  • 스코프 체인의 종점은 전역 렉시컬 환경이므로 전역 렉시컬 환경에서 검색할 수 없는 식별자는 참조에러를 발생시킨다.

4. 함수코드 평가

1. 함수 실행 컨텍스트 생성
   • 함수의 실행 컨텍스트를 생성한뒤, 실행 컨텍스트 스택에 푸시된다.
2. 함수 렉시컬 환경 생성
   1. 함수 환경 레코드 생성
      • 함수 렉시컬 환경을 구성하는 컴포넌트 중 하나인 함수 환경 레코드는 매개변수, arguments 객체, 함수 내부에서 선언한 지역 변수와 중첩 함수를 등록하고 관리한다.
   2. this 바인딩
      • 함수 환경 레코드의 내부 슬롯에 this 가 바인딩 된다. (this 는 함수 호출 방식에 따라 결정된다.)
   3. 외부 렉시컬 환경에 대한 참조 결정
      • foo 함수는 전역 코드에 정의된 전역 함수다 따라서 foo 함수 정의는 전역 코드 평가 시점에 평가된다.
      • foo 함수 정의가 평가된 시점에 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조가 할당된다.

5. 함수 코드 실행

• 식별자 결정을 위해 실행 중인 실행 컨텍스트의 렉시컬 환경에서 식별자를 검색하기 시작한다.

6. 함수 코드 실행 종료

• 시행 컨텍스트에서 foo 함수 실행 컨텍스트가 팝되어 제거되고, 전역 실행 컨텍스트가 실행 중인 실행 컨텍스트가 된다.

7. 전역 코드 실행 종료

• foo 함수가 종료되면 더는 실행할 전역 코드가 없으므로 전역 코드의 실행이 종료되고 전역 실행 컨텍스트도 실행 컨텍스트 스택에서 팝되어 실행 컨텍스트 스택에는 아무것도 남아있지 않게 된다.

---

실행 컨텍스트와 블록 레벨 스코프

• 코드 블록 레벨 스코프를 가지는 let, const 의 경우, 코드 블록을 만나게 되면 해당 코드 블록을 위한 블록 레벨 스코프를 생성해야 한다
• 이를 위해 선언적 환경 레코드를 갖는 렉시컬 환경을 새롭게 생성하여 기존의 전역 렉시컬 환경을 교체한다
• 이때 새롭게 생성된 코드 블록을 위한 렉시컬 환경의 외부 렉시컬 환경에 대한 참조는 해당 코드 블록이 실행되기 이전의 전역 렉시컬 환경을 가리킨다