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

실행 컨텍스트 관점에서의 스코프를 이해해보자.

주요용어
1. 스코프(scope) : 식별자에 대한 유효범위
2. 스코프 체인(scope chain) : 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것

바로 지난 포스팅까지 LE의 구성요소인 record와 outer 중 record에 대해서만 다루었다. 이번엔 두번째인 outer를 다뤄보자.
outer의 역할을 한마디로 정의하면

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

스코프 체인이 이뤄지는 원리는

1. outer는 현재 호출(실행)된 함수가 선언될 당시(이 말이 중요!)의 LE를 참조한다.
2. 항상 outer는 자신이 선언된 시점의 LE를 참조하고 있으므로, 가장 가까운 요소부터 차례대로 접근한다.(전역 컨텍스트까지)
3. 결론 : 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에게만 접근이 가능하지만 발견이 되지 않으면 전역 컨텍스트까지 참조하게 된다.

<script>
// 아래 코드를 여러분이 직접 call stack을 그려가며 scope 관점에서 변수에 접근해보세요!
// 어려우신 분들은 강의를 한번 더 돌려보시기를 권장드려요 :)
var a = 1;
var outer = function() {
	var inner = function() {
		console.log(a); // 이 값은 뭐가 나올지 예상해보세요! 이유는 뭐죠? scope 관점에서!
		var a = 3;
	};
	inner();
	console.log(a); // 이 값은 또 뭐가 나올까요? 이유는요? scope 관점에서!
};
outer();
console.log(a); // 이 값은 뭐가 나올까요? 마찬가지로 이유도!
</script>

진행과정)

코드 실행 -> 전역(in) -> outer()가 실행되면서 outer(in) -> outer 내부에서 inner()가 실행되면서 inner(in) -> var a;부분이 호이스팅 -> console.log(a) 실행 -> undefined -> 'a = 3'이 실행됐으나 inner함수가 실행되고 사라지면서 a는 여전히 undefined상태 -> outer(in) -> console.log(a)가 실행되면서 참조할 a가 스코프 내에 없으므로 스코프 체인 -> outer인 전역을 참조하면서 console.log(a)의 값이 1로 나옴 -> 마지막 console.log(a)의 값도 1로 나옴