실행 컨텍스트(콜스택/호이스팅)

• 실행 컨텍스트 : 실행할 코드에 제공항 환경 정보들을 모아놓은 객체.

• 자바스크립트는 어떤 실행 컨텍스트가 활성화 되는 시점에 다음과 같은 일을 한다.

  1. 선언된 변수를 위로 끌어올림 =호이스팅 (hoisting)
  2. 외부 환경 정보를 구성
  3. this 값을 설정

콜 스택

스택(Stack)과 큐(Queue)에 대한 이해가 필요하다.

스택이 바구니라면 큐는 원통.

스택 (LIFO, Last in, first out), 큐 (FIFO, First in, First out)

• 실행 컨텍스트를 스택의 한 종류인 콜스택에 쌓아올린다.
• 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경과 순서를 보장할 수 있다.

컨텍스트의 구성

• 전역공간
• eval()함수
• 함수(우리가흔히 실행 컨텍스트를 구성하는 방법)

특정 실행 컨택스트가 생성되는(또는활성화되는) 시점이 콜스택의 맨 위에 쌓이는(노축되는)순간을의미한다.

현재 실행할코드에 해당 실행 컨텍스트가 관여하게 되는 시점을 의미한다고 보면 된다.

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

1. VariableEnvironment
   • 현재 컨텍스트 내의 식별자 정보(=record) 를 갖고 있다.
     • var a = 3 이 있다면, var a 를 의미한다.
   • 외부 환경 정보(=outer)
   • 선언 시점 (LexicalEnvironment의 snapshot)
2. LexicalEnvironment
   • VariableEnvironment와 같지만 변경사항을 실시간으로 반영한다.
   • 컨텍스트가 최초에 생길 때 VE와 LE는 완전히 같지만, 시간이 지나면서 LE는 변경 사항을 실시간으로 반영해서 업데이트가 된다.
   • VE에서 복사해서 LE를 만든 이후로는 주로 LE 활용
3. ThisBinding
   • this 식별자가 바라봐야할 객체

LexivalEnvironment

record와 호이스팅

• record : 식별자 정보
• 수집 대상 정보 : 함수에 저장된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자 등
• 컨택스트 내부를처음부터 끝까지 순서대로 훑어가며 수집 (호이스팅)(실행은 x)

호이스팅

1. 변수 정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는실행 전의 상태이다. (코드 실행 전 이미 모든 변수 정보를 알고 있는 것)
2. 변수 정보 수집 과정을 이해하기 쉽게 설명한 가상 개념

호이스팅 법칙 1 : 식별자 정보를 맨 위로 끌어올린다

//action point 1 : 매개변수 다시 쓰기(JS 엔진은 똑같이 이해한다)
//action point 2 : 결과 예상하기
//action point 3 : hoisting 적용해본 후 결과를 다시 예상해보기

function a () {
	var x = 1;
	console.log(x);
	var x;
	console.log(x);
	var x = 2;
	console.log(x);
}
a(1);

• 호이스팅 적용 과정
  1. function a () {
  2. var x;
  3. var x;
  4. var x;
  5. x = 1;
  6. console.log(x);
  7. console.log(x);
  8. x = 2;
  9. console.log(x);
  10. }
  11. a()

호이스팅 법칙 2 : 함수 선언은 전체를 호이스팅한다.

function a () {
	console.log(b);
	var b = 'bbb';
	console.log(b);
	function b() { }
	console.log(b);
}
a();

• 호이스팅 적용

function a () {
	var b; // 변수 선언부 호이스팅
	function b() { } // 함수 선언은 전체를 호이스팅 

	console.log(b); //[Function : b]
	b = 'bbb'; // 변수의 할당부는 원래 자리에

	console.log(b); //'bbb'
	console.log(b); //'bbb'
}
a();

함수의 호이스팅

• 함수 선언문 : 정의부만 존재하고 할당 명령이 없는 경우

function a () {/*...*/} //함수명a가 곧 변수명
a(); // 실행 OK

• 함수 표현식 : 정의한 function을 별도 변수에 할당하는 경우

1. 익명 함수 표현식 : 변수명 b가 곧 함수명(일반적 case)

var b = function () { /* … */}
b(); //실행 OK

1. 기명 함수 표현식 : 변수명은 c, 함수명은 d (활용성 X)

var c = function d () {/*...*/}
c(); // 실행 OK
d(); //에러!

• 함수 선언문은 전체를 호이스팅
• 함수 표현식을 사용하면 함수 선언부만 호이스팅
• 협업을 많이 하고, 복잡한 코드일수록 함수 표현식을 활용하는 것이 좋다.

outerEnvironmentReference

1. 스코프
   1. 식별자에 대한 유효범위를 의미한다.
   2. 대부분의 언어에서 존재.
2. 스코프 체인
   1. 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것.

outer : 스코프 체인이 가능토록 하는 것( 외부 환경의 참조 정보)

outer는 현재 호출된 하수가 선언될 당시의 LE를 참조(그 당시의 환경 정보를 저장)한다.