TIL 23. 실행 컨텍스트

실행 컨텍스트란

실행할 코드에 제공할, 환경 정보를 모아놓은 객체.

실행컨텍스트가 활성화 되는 시점에 아래의 행위를 한다.

• 선언된 변수를 위로 끌어올린다. (hoisting)
• 외부 환경 정보를 구성
• this 값 설정

Call Stack (콜 스텍)

실행할 코드에 제공 할, 환경 정보를 모아놓은 객체를 콜 스택에 넣는다.

실행 컨텍스트 구성

함수를 호출했을 때 함수의 실행부분으로 들어가게 되고,
그 안의 함수를 호출하는 코드를 보고 다시 해당 함수의 실행 부분으로 들어가기를 반복하다가 가장 안쪽 부터 실행한다.

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

• Variable Enviroment (VE)
  • 현재 컨텍스트 내의 식별자의 정보 ( let a = 1; 의 a가 식별자)
  • 외부 환경 정보
  • 선언 시점의 스냅샷 (순간포착), 유지 O
• Lexical Enviroment (LE)
  • VE와 같으나, 변경사항의 실시간 반영
  • 스냅샷 유지 X

실행 컨텍스트 생성 시, VE에 저장 후, 복제해서 LE를 만들고 LE를 주로 사용.

VE, LE의 구성요소

• VE, LE 모두 environmentRecord, outerEnvironmentReference로 구성.
• 보통 짧게 record, outer라고 부른다.

environmentRecord (record)

• 현재의 컨텍스트와 관련된 모든 식별자 정보들을 수집, 저장한다.

• 수집 대상으로는 매개변수 식별자, 함수, 선언된 변수 식별자 등이다.

• 컨텍스트 내부를 처음부터 끝까지 순서대로 수집한다.
  (가장 위로 끌어올린다고 보면 된다.)

• 수집을 모두 했더라도, 아직 실행 전의 상태.
  (그래서 JS엔진은 코드 실행 전에 이미 모든 변수 정보를 알고 있다.)

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

위의 코드는 아래처럼 호이스팅 된다.

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

식별자를 모두 모아, 가장 위로 올리고 나머지들을 차례로 나타낸다.

---

// 1번
// 2번

console.log(sum(3, 4));

//아래 함수 전체가, 호이스팅 되어 1번 위치로.
function sum (x, y) {	
  return x + y;			
}						

let a = sum(1, 2);

// 아래 함수 전체가, 호이스팅 되어 2번 위치로.
function sum (x, y) {
  return x + ' + ' + y + ' = ' + (x + y);
}

let c = sum(1, 2);
console.log(c);

위 코드처럼 함수가 선언문일 경우 함수 전체가 최상단에 호이스팅 된다.
그렇기 때문에 같은 곳에 영향을 미치는 두 함수라면, 아래 함수가 위의 함수를 덮어버리기 때문에 예상치 못한 일이 발생한다.

// 1번
// 2번

console.log(sum(3, 4));

// 아래의 let sum 부분만 1번 위치로.
let sum = function (x, y) {
  return x + y;
}

let a = sum(1, 2);
// 아래의 let sum 부분만 2번 위치로.
let sum = function (x, y) {
  return x + ' + ' + y + ' = ' + (x + y);
}

위 코드처럼 함수가 표현식일 경우, 식별자 부분만 호이스팅 되고, 실행 부분은 호이스팅 되지 않기 때문에 서로에게 영향을 주지 않는다.

outerEnvironmentReference (scope)

스코프란 식별자에 대한 유효범위를 나타낸다.
스코프 체인이란 식별자의 유효범위(스코프)를 안에서부터 바깥으로 검색하는 것.
outer가 스코프 체인이 가능하도록 해준다.(외부 환경의 참조 정보)

• 아래는 스코프 체인을 그림으로 그려본 것이다.
  

  • C는 C 안에서 식별자를 찾고, 없다면 B, 그래도 없다면 A에서 찾는다.

  • B는 B 안에서 식별자를 찾고, 없다면 A에서 찾는다.

  • A는 A 안에서 식별자를 찾는다.

  • 식별자를 찾을 때, hoisting에 따라 영향을 받는다.
    ex) C안에서의 var a = 3;의 a는 console.log로 찍히지 않는다.

전역 변수, 지역 변수

• 전역 변수는 가장 바깥에서 선언한 변수다.
• 지역 변수는 함수 안에서 선언한 변수다.