실행 컨텍스트 (Execution Context)

• 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념
• 스코프, 호이스팅, this, function, 클로저 등의 동작 원리를 담고 있는 javascript의 핵심 원리
• 실행 가능한 코드가 실행되기 위해 필요한 환경
• 코드가 실행되고 있는 구역, 범위
• 변수 객체(변수, 인자, 함수 선언), 스코프 체인, this로 구성
• 함수 실행이 끝나면 함수 컨텍스트 pop, 페이지 종료 후 전역 컨텍스트 pop
• 실행 컨텍스트는 LIFO 구조인 스택에 쌓인다

1. 전역 실행 컨텍스트 (Global Execution Context)

• 최상에 위치하고 있는 모든 전역 변수, 함수를 포함하는 전역 객체를 가리킨다
• 전역 객체(Global Object/GO)는 전역 변수와 전역 함수를 프로퍼티로 갖고 있는다
• 전역 컨텍스트의 경우, Variable Object, 스코프 체인, this 값은 항상 전역 객체이다
• 특정 함수 내에 있는 코드 이외의 코드는 전역 컨텍스트에서 실행
• 전역 코드 : 전역에 있는 코드
• 페이지가 종료될 때까지 유지된다

2. 함수 실행 컨텍스트 (Functional Execution Context)

• 함수가 호출될 때마다 해당 함수의 실행 컨텍스트가 생성
• 함수 컨텍스트의 변수 객체는 Activation Object(AO / 활성 객체)를 가리킨다
• 일반적으로 실행 가능한 코드는 전역 코드 & 함수 코드이다
• 각각의 함수들마다 실행 컨텍스트를 갖는데 함수가 호출돼야만 만들어진다
• 함수 코드 : 함수 내에 있는 코드

3. Eval 코드 (Eval Function Execution Context)

• eval 함수로 실행되는 코드
• 많이 사용하지 않는다

4. 실행 컨텍스트의 3가지 프로퍼티

• 실행 컨텍스트는 물리적으로 객체 형태를 가지고 있고 3가지 프로퍼티를 갖고 있다

1. Variable object(VO / 변수 객체)
   -var, function 선언(함수 표현식 X),
   매개변수(parameter), 인자(argument)
2. Scope chain -
   variable + 모든 부모 스코프
3. thisValue
   -context object

1.1 scope chain의 생성과 초기화

scope chain - 변수를 검색 (실행 컨텍스트가 참조할 수 있는 변수 객체 리스트)
prototype chain - 객체의 프로퍼티, 메소드를 검색

• 실행 컨텍스트가 생성되면 scope chain의 생성과 초기화가 실행
• 전역 컨텍스트의 scope chain은 전역 객체 리스트

1.2 변수 객체화 (Variable Instantiation)

• Variable object(변수 객체)에 프로퍼티와 값을 추가
• Variable object(변수 객체)에 변수, 함수 선언, 매개 변수, 인자를 추가해 객체화한다
• 전역 코드의 Variable object(변수 객체)는 전역 객체를 가리킨다

- 객체화 순서

1. 매개 변수와 인자 추가
   함수 코드 - Variable object(변수 객체)의 프로퍼티로 매개 변수, 값으로 인자 추가
   전역 코드 - 매개 변수가 없어서 생략
2. 함수 호이스팅
   코드 내에서 함수 선언 대상으로 Variable object(변수 객체)의 프로퍼티로 함수명, 값으로 생성된 함수 객체 추가
3. 변수 호이스팅
   코드 내에서 변수 선언 대상으로 Variable object(변수 객체)의 프로퍼티로 변수명, 값으로 undefined 생성

1.2-1 함수 호이스팅

• 객체화 순서 2번 함수 호이스팅에서 생성된 함수 객체는 [[Scopes]] 프로퍼티를 가지게 된다
• [[Scopes]] 프로퍼티는 함수 객체에만 있는 프로퍼티로 함수 객체가 실행되는 환경을 가리킨다
• 따라서 현재 실행 컨텍스트의 scope chain이 참조하는 객체를 값으로 설정
• 내부 함수의 [[Scopes]] 프로퍼티는 자신의 실행 환경(Lexical Enviroment)과 자신을 포함하는 외부 함수의 실행 환경(Activation object)과 전역 객체를 가리킨다
• 자신을 포함하는 외부 함수의 실행 컨텍스트가 소멸해도 [[Scopes]] 프로퍼티가 가리키는 외부 함수의 실행 환경은 소멸하지 않고 참조 가능 ---> 클로저

1.2-2 변수 호이스팅

1. 선언 단계 (Declaration phase)

• Variable Object(변수 객체)에 변수 등록, 스코프가 참조할 수 있는 대상이 된다
• 변수를 실행 컨텍스트 변수 객체에 등록

2. 초기화 단계 (Initialization phase)

• Variable Object(변수 객체)에 등록된 변수를 메모리에 할당, undefined로 초기화

3. 할당 단계 (Assignment phase)

• undefined로 초기화된 변수에 실제 값을 할당

var로 선언된 변수는 undefined 출력

• 선언 단계와 초기화 단계가 한 번에 발생
• scope chain이 가리키는 변수 객체에 변수가 등록되고 undefined로 초기화
• 변수 선언문 이전에 변수에 접근해도 변수 객체에 변수가 존재하기 때문에 에러 발생 X
• undefined 출력
  ---> 이것이 변수 호이스팅

let과 const로 선언된 변수는 reference error 출력

• 실행 컨텍스트가 만들어질 때 어떠한 값도 가지고 있지 않는다
• let과 const로 할당한 변수는 스코프 초기에 선언 단계만 일어나고 선언문에 도달해야 초기화 단계가 발생한다
• 변수 선언 후 초기화되지 않은 상태에서 접근하게 되면 reference error를 출력

1.3 thisVlaue 결정

• 변수 선언 처리가 끝나면 thisVlaue 결정
• 따로 할당되기 전까지 this는 전역 객체(window)를 가리킨다
• 함수 호출에 따라 this에 할당되는 값이 결정된다

5. 실행 컨텍스트 순서

var a = 1;
function foo() {
  var b = 2; 
    function bar() {
      var c = 3;  
      console.log(a + b+ c);
    }
  bar();
}
foo();

• 1. javascript 엔진이 <script>를 읽는다
• 2. 비어 있는 실행 컨텍스트 스택 생성
• 3. 전역 객체 생성 후 전역 실행 컨텍스트가 생성 (스코프 체인 생성과 초기화, 변수 객체화, thisValue 결정)
• 3-1. scope chain 생성, 초기화 : Variable Object(전역 변수 객체)
• 3-2. 변수 객체화 Variable object : a, foo, 매개 변수 null, 인자 null
• thisValue : window
• 4. 비어 있는 실행 컨텍스트 스택에 추가(push)된다 (LIFO, last in first out)
• 5. 전역 코드 foo 함수에 대한 새로운 함수 컨텍스트 생성, 스택에 push
• 5-1. scope chain 생성, 초기화 : 현재 실행 환경 스코프(Activaion Object)
• 5-2. 전역 컨텍스트의 scope chain이 참조하는 객체를 scope chain에 push
  따라서 AO -> 전역 객체 순으로 접근 / Scope chain : AO, 전역 컨텍스트 scope chain
• 5-3.변수 객체화 : Variable object(변수 객체)의 프로퍼티로 함수명 : foo
• 5-4. 값 : 함수 객체 설정 (프로퍼티 : bar, 값은 새로 생성된 함수 객체)
• 5-5. 변수 객체화 Variable object : b, bar, 매개 변수 null, 인자 null
• 5-6. thisValue : window
• 6. bar 함수에 대한 함수 컨텍스트 생성, 스택에 push
• 6-1. scope chain 생성, 초기화 : 현재 실행 환경 스코프
• 6-2. 외부 함수 컨텍스트의 scope chain이 참조하는 객체를 scipe chain에 push
• 6-3. 전역 컨텍스트의 scope chain이 참조하는 객체를 scope chain에 push
  따라서 AO -> 외부 함수 컨텍스트 scope chain -> 전역 컨텍스트 scope chain 참조
• 6-4. 변수 객체화 Variable object : c, 매개 변수 null, 인자 null
• 6-5. thisValue : window
• 7. a는 bar AO -> foo AO -> 전역 컨텍스트에서 참조
• 8. b는 bar AO -> foo AO에서 참조
• 9. C는 bar AO에서 참조
• 10. bar 함수 실행이 끝나면 bar 함수 컨텍스트 pop
• 11. foo 컨텍스트 pop
• 12. 전역 컨텍스트 pop