자바스크립트 실행 컨텍스트

1. 실행 컨텍스트란?

a. 스택 vs 큐

b. 콜 스택(Call stack)

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

2. 모아서 콜 스텍에!

3. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장

컨텍스트의 구성 방법

1. 전역공간

2. eval() 함수

3. 함수

4. 실행 컨텍스트 구성 예시

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

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

실행 컨텍스트 객체

1. 생성(활성화) 시점 : 한 ‘실행 컨텍스트’가 콜 스택의 맨 위에 쌓이는 순간이 곧현재 실행할 코드에 관여하게 되는 시점

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

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

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

2. VariableEnvironment, LexicalEnvironment 개요

. VE와 LE의 비교

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

2.LexicalEnvironment(1) - environmentRecord와 호이스팅

a. 개요

i. 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장(수집)
ii. 수집 대상 정보 : 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수
식별자 등
iii. 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집

b. 호이스팅

a. 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행 전
의 상태임(JS 엔진은 코드 실행 전 이미 모든 변수정보를 알고 있는 것)
b. 변수 정보 수집 과정을 이해하기 쉽게 설명한 ‘가상 개념’
c. 호이스팅 규칙

a. 매개변수 및 변수에 대한 호이스팅**

//action point 1 : 매개변수 다시 쓰기(JS 엔진은 똑같이 이해한다)
//action point 2 : 결과 예상하기
실행 컨텍스트4//action point 3 : hoisting 적용해본 후 결과를 다시 예상해보기
function a (x) {
console.log(x);
var x;
console.log(x);
var x = 2;
console.log(x);
}
a(1);

b. 함수 선언의 호이스팅

//action point 1 : 결과 값 예상해보기
//action point 2 : hoisting 적용해본 후 결과를 다시 예상해보기
function a () {
console.log(b);
var b = 'bbb';
console.log(b);
function b() { }
console.log(b);
}
a();

1. 함수 선언문을 주의해야 하는 이유

...
console.log(sum(3, 4));
function sum (x, y) {
return x + y;
}
...
...
var a = sum(1, 2);
...
function sum (x, y) {
return x + ' + ' + y + ' = ' + (x + y);
}
...
var c = sum(1, 2);
console.log(c);

2. 만약 함수 표현식이었다면...?

...
console.log(sum(3, 4));
var sum = function (x, y) {
return x + y;
}
...
...
var a = sum(1, 2);
...
var sum = function (x, y) {
return x + ' + ' + y + ' = ' + (x + y);
}
...
실행 컨텍스트6var c = sum(1, 2);
console.log(c);