실행 컨텍스트?

실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

콜스택

함수가 호출되면, 콜스택에 실행 컨텍스트가 push 된다.
함수가 종료되면, 종료되면 콜스택으로부터 pop 된다.

최상단에 있는 컨텍스트가 활성화된 컨텍스트이다.
가장 아래에는 항상 전역 컨텍스트가 담긴다.

---

구성

실행 컨텍스트는 variable environment, lexical environment, this binding으로 구성된다

Variable Environment

• Record(식별자 정보)를 갖고 있다.
• Outer(외부 환경 정보)를 갖고 있다.

Lexical Environment

• Variable Environment처럼 Record와 Outer를 가진다.
• Lexical은 변경사항이 실시간으로 업데이트 된다. 따라서, 더 많이 사용된다.

This binding

식별자가 바라봐야 할 객체의 정보가 저장된다.

---

Record

레코드는 식별자 정보를 '기록'하는 곳이다.
JS 엔진이 먼저 전체 코드를 순서대로 스캔하면서 Record에 정보를 수집한다.

Hoisting

Record의 이러한 특성 때문에 식별자 선언문이 마치 최상단에 끌어올려진 듯한 현상이 발생하는데 이를 호이스팅이라고 부른다.

변수 호이스팅

var

선언과 동시에 undefined로 초기화

console.log(id);    // (1)
var id = '2hanbyeol1'; // (2)
console.log(id);    // (3)

(0)	(1)	(2)	(3)
Record에 식별자 정보 기록	undefined 출력	id 값 업데이트	2hanbyeol1 출력

let & const

식별자를 기록해두긴 하지만 값을 초기화하지 않는다.

console.log(id);    // (1)
const id = '2hanbyeol1';
console.log(id);

(0)	(1)
Record에 식별자 정보 기록	🚨 Reference Error 🚨

아직 변수 id의 값을 읽어올 수 없기 때문에 Reference Error가 생긴다.
let/const로 실행했을 때, 값을 할당하기 전 식별자를 참조할 수 없는 이러한 구역을 일시적 사각지대 (Temporal Dead Zone)라고 부른다.

함수 호이스팅

함수 선언문

선언과 동시에 함수를 생성하므로, 선언 전에도 함수를 사용할 수 있다.

hi(); // 정상 동작
function hi() {}

함수 표현식

함수를 변수에 담는 것이기 때문에 변수 호이스팅과 동일하게 동작한다.

var	let, const
hi: undefined	hi: (비어있음)

---

Outer

현재 호출된 함수가 선언될 당시 Lexical Environment를 참조한다.

전역 Context에서 A가 선언됐다면,
A의 Outer는 전역 Context의 Lexical Environment를 참조한다.

Scope

식별자에 대한 유효 범위

Scope Chain

식별자를 결정하기 위해 사용하는 스코프들의 연결 리스트

var a = 1;
var outer = function() {
    var inner = function() {
        console.log('inner', a);
    }
    inner();
    console.log('outer', a);
};
outer();
console.log('전역', a)

Record에 식별자 정보 기록	a 값 업데이트	outer() 실행	inner() 실행	a의 식별자를 결정

🤓 변수 섀도잉
동일한 식별자로 인해 상위 스코프에서 선언된 식별자의 값이 가려지는 현상