실행 컨텍스트 (스코프, 호이스팅, 렉시컬 환경)

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

 

(이미지 출처 : https://velog.io/@leejuhwan/스택STACK과-큐QUEUE )

JS에선 스택을 사용한다 

콜스택(call stack):  스택의 한 종류, 가장 위에 쌓여있는 콘텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장

// ---- 1번
var a = 1;
function outer() {
	function inner() {
		console.log(a); //undefined
		var a = 3;
	}
	inner(); // ---- 2번
	console.log(a); // 1
}
outer(); // ---- 3번
console.log(a); // 1

코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료

		inner(실행)
	outer(실행)	outer(중단)	outer(실행)
전역(실행)	전역(중단)	전역(중단)	전역(중단)	전역(종료)

무엇인가가 새로 실행된다면 스택에 가장 위에 쌓이고 그전에 있던 스택은 가장 위에 스택이 시작하면서 중단된다 그리고 가장 위에 스택이 종료되어 빠져나간다면 중단되었던 그다음 스택이 재게 된다

=> 가장 위에 있는 스택이 현재 실행할 혹은 실행 중인 코드이다

 

실행 콘텍스트 내부 :

• VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보. 선언 시점의 LexicalEnvironment의 스냅숏으로, 변경 사항은 반영되지 않음
• LexicalEnvironment : 스냅숏이 저장되지 않음 변경 사항이 반영됨 나머진 VariableEnvironment와
• ThisBinding : this가 바라보는 객체
• 실행 콘텍스트를 생성할 때, VE에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LE를 만들고 이후에는 주로 LE를 활용

LexicalEnvironment(렉시컬환경) 

environmentRocord(=record)(환경 레코드) : 현재 콘텍스트와 관련된 코드의 식별자 정보들이 저장, 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집(저장)

outerEnvironmentReference(=outer)(외부 환경 참조) : 현재 렉시컬 환경보다 더 상위의 렉시컬 환경 정보, 말 그대로 외부 환경의 참조 정보

-> 현재 호출된 함수가 선언될 당시의 렉시컬환경을 참조해요. 참조한다는 말이 어려우면, 그 당시의 환경 정보를 저장한다 정도로 이해

 

위 두 가지로 구성됨

 

먼저 환경 레코드 부분 

호이스팅(hoisting) : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

• 변수  선언부만 가져온다 
  -> let x = 1 일 때 이는 선언과 할당이 동시에 사용되었다 (let x  +  x=1) 여기서 let x만 가져와 가장 위로 올리고 메모리 공간을 미리 확보하는 것이다  
• 함수 선언문에만 적용되며 함수 전체를 가져온다
   -> 표현식에는 적용이 안되며 함수는 함수 전체가 위로 올려져 주의해야 한다 

function tesr(x,y){  만약 이 test함수로 쭉 사용을 하다가 
}
console.log(test(1,1)) // 0

...

function test(x,y){ 누군가 새로 이렇게 추가한다면
    return x-y;
}

console.log(test(1,1)) // 0

기존 내용들에도 새로 추가한 동명의 test함수가 적용되어 문제가 생긴다

 

다음으로 외부 환경 참조 부분 

스코프 : 식별자에 대한 유효범위

스코프 체인 : 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해 나가는 것

-> outer에서 오직 자신이 선언된 시점의 렉시컬환경을 참조하고 있으므로, 가장 가까운 요소부터 차례대로 접근 가능

-> 타고 타고 올라가면 전역을 참조