TIL 51 | 실행 컨텍스트

📋Execution Context

• JavaScript 코드가 실행되고 있는 컨텍스트(환경)을 제공하는 객체
• 실행 컨텍스트(Execution Context)는 실행할 코드에 제공할 환경 정보들을(변수 정보들)모아 놓는다.
• 함수를 실행할 때 마다, 그 함수에 대한 새로운 실행 컨텍스트를 생성하여 자신만의 고유한 컨텍스트에서 실행된다.

✨실행 컨텍스트와 콜스택

아래의 예제 코드를 보면 실행 컨텍스트가 어떤 순서로 쌓이고, 어떤 순서로 실행에 관여하는지 확인 해보겠다.

function outer() {
	function inner() {
    	return 'inner 함수';
    }
  
  	inner(); // inner 함수 컨텍스트
}

outer(); // outer 함수 컨텍스트

1. JavaScript 코드를 처음 실행하는 전역 컨텍스트가 콜스택에 담긴다.
2. ourter() 함수를 호출하면 JavaScript 엔진은 outer 관련 환경 정보를 수집해서 outer 실행 컨텍스트를 생성한 뒤에 콜스택에 담는다.
3. outer 함수 내부의 코드를 실행하다가 함수 내부에서 inner() 함수를 호출하면 outer 함수 실행 컨텍스트를 중단하고 생성된 inner 실행 컨텍스트를 실행한다.
4. 즉, inner 함수 내부의 코드를 실행하다가 return를 발견하면 반환하고, inner 함수의 실행 컨텍스트에서 제거된다. 그리고 아래에 있던 outer 컨텍스트가 종료되어 콜스택에 남아있는 전역 컨텍스트를 실행하고 제거한뒤에 종료된다.

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

1. VariableEnvironment : 변수 객체(Variable Object)
2. LexicalEnvironment
   a. Environment Record
   - 변수와 함수 선언등을 저장
   - 코드가 실행되기 전에 정보를 모두 수집
   - JavaScript 엔진은 실행 되기 전에 코드의 변수명을 모두 알고 있다는 건 → hoisting
   - 해당 변수가 어떤 값을 할당 했는지 관심이 없다.
   b. Outer
   -다른 LexicalEnvironment를 참조하기 위함 → scope 탐색
3. ThisBinding
   • 현재 컨텍스트의 this가 어디를 가르키는지?

📋Hoisting

호이스팅(Hoisting)은 변수의 선언, 함수의 선언이 모두 끌어올려져 유효 범위 내의 최상단에 선언하는것을 말한다.

✌TDZ(Temporal Dead Zone)

변수의 키워드 let, const는 실행되기 전까지 사용할 수 없다. 이 단계의 공간을 TDZ 라고한다.

function a(x) {
	console.log(x);

	var x;
	console.log(x);

	var x = 2;
	console.log(x);
}

a(1);

📋Scope

• 스코프(Scope)는 JavaScript 프로그램 언어에서 유효범위는 어느 범위까지 참조하는지 말한다.
• 스코프의 종류는 전역 스코프, 지역 스코프 두 까지로 나뉜다.

✌Global Scope

• 전역 스코프는 유효범위 내에서 어디에서든 참조 가능한 범위
• var 키워드를 사용하여 변수를 선언하면, 전역 스코프를 가지게 된다.

✌Local Scope

• 지역 스코프는 let, const 변수를 선언할 때 if, for문, {}등과 같은 범위를 가진다.
  ⚠️ var 키워드를 {}문에서 사용하면 전역 스코프를 가진다.

if (true) {
  var x = 5;
}

console.log(x);  // 5

📋Scope Chain

변수가 해당 스코프에 존재하지 않을 때 바깥으로 차례로 검색하는 것을 스코프 체인(Scope) 이라고 한다.

📋Closure

클로저(Closure) 함수를 선언할 때 만들어진 스코프가 사라진 후에도 호출할 수 있는 함수 즉, 스코프가 끝난 외부 함수의 변수를 참조할 수 있다.