22.11.30 실행 컨텍스트

실행 컨텍스트

1. 스택 vs 큐

• 스택(stack) : LIFO(후입선출) Last in, First out

• 큐(Queue) : FIFO(선입선출) First in, First out

2. 콜 스택(call stack)

• 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
  • 실행 컨텍스트를 모아서 콜스택에 입력
• 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법
  => 코드의 환경 및 순서를 보장
• 컨텍스트의 구성 방법

1. 전역공간
2. eval()함수
3. 함수
4. 실행컨텍스트 구성 예시 + (스코프체인 예시)

// 스택은 후입선출
// ---- 1) 코드실행 2) 전역 in (첫번째 스택)
var a = 1;
function first() { // ---- 3) 전역 중단 + first in (두번째 스택)
  function second() { // ---- 4) first 중단 + second in (세번째 스택)
    console.log(a); //undefined
    var a = 3;
  }
  second(); // ---- 5) second out + first 재개 (세번째 스택 out)
  console.log(a); // 1 출력 (세번째 스택은 나갔고, 두번째 스택에는 a를 지정해주지않아 전역에서 가져옴)
}
first(); // 6) ---- first out + 전역 재개 (두번째 스택 out)
console.log(a);// 1 출력
// ---- 7) 전역 out (세번째 스택 out) 8 코드 종료

1) 코드실행
2) 전역(in)
3) 전역(중단) + first(in)
4) first(중단) + second(in)
5) second(out) + first(재개)
6) first(out) + 전역(재개)
7) 전역(out)
8) 코드종료

실행 컨텍스트 객체

• 생성(활성화) 시점 : 한 ‘실행 컨텍스트’가 콜 스택의 맨 위에 쌓이는 순간

생성 시점. 즉, 활성화 시점에 JS 엔진은 해당 컨텍스트에 관련된 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장

• 실행컨텍스트에 담기는 정보

1. VariableEnvironment
   • 현재 컨텍스트 내의 식별자 정보
   • 외부 환경 정보
   • 선언 시점 LexicalEnvironment의 snapshot
2. LexicalEnvironment
   • VariableEnvironment와 동일하나 변경사항이 실시간으로 반영
3. ThisBinding
   • this 식별자가 바라봐야할 객체

VariableEnvironment, LexicalEnvironment

• VE와 LE의 비교
  • 담기는 내용 : 동일
  • 스냅샷 유지여부
    • VE : 유지
    • LE : 유지X
  • 실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음,
    이를 그대로 복사해서 LE를 만들고 이후에는 주로 LE를 활용
• 구성요소
  • VE, LE모두 동일하며, ‘environmentRecord’와 ‘outerEnvironmentReference’로 구성
  • environmentRecord(=record)
  • outerEnvironmentReference(=outer)

LexicalEnvironment(1) - environmentRecord와 호이스팅

• LexicalEnvironment
  • 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장(수집)
  • 수집 대상 정보 : 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자 등
  • 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집
• 호이스팅
  • 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행 전의 상태임
  • 변수 정보 수집 과정을 이해하기 쉽게 설명한 가상 개념
• 호이스팅 규칙
  • 매개변수 및 변수에 대한 호이스팅

function a (x) {    
  console.log(x);   	// 		var x;	
  var x;				// 		var x;
  console.log(x);     	// 	=>	var x;
  var x = 2;			//		x = 1;
  console.log(x);		//  	console.log(x) 1출력	
}						//  	console.log(x) 1출력					
a(1)					//  	x = 2;
// 		console.log(x) 2출력

//함수 선언의 호이스팅
function a () {
  console.log(b); // [function: b] 출력
  var b = 'bbb';
  console.log(b); // bbb 출력
  function b() { }
  console.log(b); // bbb 출력
}
a();

• 함수 정의의 3가지 방식

function a () { /* ... */ } // 함수 선언문. 함수명 a가 곧 변수명
a(); // 실행 ok
var b = function () { /* ... */ } // (익명 함수 표현식. 변수명 b가 곧 변수명
b(); // 실행 ok
var c = function d () { /* ... */ } // 기명 함수 표현식. 변수명은 c, 함수명은 d
c(); // 실행 ok
d(); // 에러!

• 함수 선언문, 함수 표현식

console.log(sum(1, 2)); 			// 3 출력
console.log(multiply(3, 4));		// 에러남
function sum (a, b) { // 함수 선언문 sum
  return a + b;
}
var multiply = function (a, b) { // 함수 표현식 multiply
return a + b;
}

LexicalEnvironment(2) - 스코프, 스코프 체인, outerEnvironmentReference(=outer)

• 주요 용어
  • 스코프
    1. 식별자에 대한 유효범위
    2. 대부분 언어에서 존재하며, JS에서도 존재(es5 / es6는 조금 다름)
  • 스코프 체인
    1. 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것
  • outerEnvironmentReference(이하 outer)
    1. 스코프 체인이 가능토록 하는 것(외부 환경의 참조정보)
• 스코프 체인
  • outer는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조
  • A함수 내부에 B함수 선언 → B함수 내부에 C함수 선언(Linked List)
  • 결국 전역 컨텍스트의 LexicalEnvironment를 참조
  • 오직 자신이 선언된 시점의 LexicalEnvironment를 참조하고 있으므로,
    가장 가까운 요소부터 차례대로 접근 가능
  • 결론 : 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에게만 접근이 가능

전역변수와 지역변수

• 전역변수 : 전역 공간에서 선언한 변수
• 지역변수 : 함수 내부에서 선언한 변수