javascript 심화 1 (실행 컨텍스트)

 

실행 컨텍스트 📖

실행할 코드에 대한 `환경 정보`들을 모아놓은 `객체`입니다. 이렇게만 말하면 이해가 잘 안 될 것 같으니 더 자세하게 설명해 드리겠습니다. 우선 실행 컨텍스트를 이해하기 위해선 `콜 스택`에 대한 이해가 반드시 필요합니다!

 

예시코드 ✅

// ---- 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);

 

실행 컨텍스트의 구성 순서📃

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

실행 순서

 

결국 실행 컨텍스트가 생성되는 시점이 콜 스택의 맨 위에 쌓이는 순간을 의미합니다. 곧 현재 실행할 코드에 해당 실행 컨텍스트가 관여하게 되는 시점을 의미한다고 생각하시면 됩니다.👍

 

콜 스택(call stack) 📖

콜 스택은 간단하게 설명하면 코드가 실행되면서 생성되는 실행 컨텍스트 저장하는 스택(LIFO) 자료구조 입니다. 그리고 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 콜 스택에 쌓아 올립니다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 환경 및 순서를 보장할 수 있습니다.

 

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

`VariableEnvironment`, `LexicalEnvironment`는 같은 것이지만 변경 사항을 유지 하냐, 유지하지 않냐에 대해서 차이점이 있습니다.

 

`VE` : 스냅샷을 유지합니다.

`LE` : 스냅샷을 유지하지 않습니다.

VariableEnvironment

현재 컨텍스트 내의 식별자 정보와 외부 환경 정보, 선언 시점의 LE의 스냅샷을 갖고 있습니다.

LexicalEnvironment

실행 컨텍스트가 최초에 생길 땐 `VariableEnvironment`랑 동일하지만 변경사항을 실시간으로 반영하면서 업데이트합니다.

ThisBinding

this 식별자가 바라봐야 할 객체

 

 

VariableEnvironment vs LexicalEnvironment 📖

렉시컬 환경

 

VariableEnvironment ✅

환경 레코드(Environment Record)  = 식별자 정보

• var a = 3에 var a를 의미합니다.
• 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자 등을 저장
• var 키워드로 선언되는 변수, 함수 선언문으로 생성된 함수가 저장된다.

 외부 렉시컬 환경에 대한 참조(outerLexicalEnvironment Reference) = 외부 환경 정보

• 상위의 스코프에 접근할 수 있는 참조 (스코프 체인)

 

LexicalEnvironment ✅

환경 레코드(Environment Record)  = 식별자 정보

• 환경 레코드 : let, const 키워드로 선언되는 변수

 

외부 렉시컬 환경에 대한 참조(outerLexicalEnvironment Reference) = 외부 환경 정보

• 상위의 스코프에 접근할 수 있는 참조 (스코프 체인) = Variable Environmen

✨식별자 정보(환경 레코드)를 수집할 때 ✨ 호이스팅 개념이 나옵니다. 

 

* 처음 실행 컨텍스트가 생성될 때는 둘 다 동일한 렉시컬 환경을 참조하지만, 소스코드를 평가하는 과정에서 새로운 렉시컬 환경이 생성되고, 둘의 참조가 달라지게 됩니다. `VariableEnvironment`에 정보를 먼저 담은 후 이를 그대로 복사해 `LexicalEnvironment`를 만들고 이를 활용합니다.

 

스코프, 스코프 체인이란?🧐

`스코프` : 식별자에 대한 유효범위 즉, 함수 단위입니다.

`스코프 체인` : 스코프끼리 연결된 것이 스코프 체인입니다.

 

예시코드 ✅

var c = 4;

function outer() {
  var a = 1;
  var b = 3;

  function inner() {
    var a = 2;
    console.log(a); // 2
    console.log(b); // 3
    console.log(c); // 4
  }
	
  inner();
}

outer();

 

순서

• 1. console.log(b)에서 b의 값을 inner 스코프에서 먼저 찾습니다.
• 2. inner 스코프 안에는 b가 없기 때문에 그다음 outer 스코프에서 b가 있는지 찾습니다.
• 3. 결국 해당 스코프에 식별자가 존재하지 않는다면 상위 스코프 참조(외부 환경 참조)를 바탕으로 스코프 체인에서 식별자를 찾게 됩니다.

 

스코프 체인

 

요약 📘

• VE, LE는 같은 것이지만 변경 사항을 유지하냐, 유지하지 않냐에 대해서 차이점이 있다.
• 실행 컨텍스트의 구성 요소인 렉시컬 환경은 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조로 구성되어 있습니다.
• 환경 레코드(식별자 정보)는 변수, 함수의 선언부가 호이스팅 된 것들을 가지고 있다.
• 외부 환경 참조는 실행 컨텍스트가 선언될 당시의 렉시컬 환경 정보를 가지고 있다. ex) 전역 -> A함수, A환경이 만들어질 때 환경은 전역 컨텍스트이기 때문에 전역 환경을 참조한다.
• 소스코드를 실행하는 런타임에서, 어떤 변수나 함수를 마주치면 렉시컬 환경에 등록되어 있는 식별자를 통해 그 값을 찾아 이용합니다.
• 현재 스코프에 식별자가 존재하지 않는다면 상위 스코프 참조(외부 환경 참조)를 바탕으로 스코프 체인에서 식별자를 찾게 됩니다.

 

 

회고 🧐

호이스팅에 대해 다루긴 했지만 var, let, const의 호이스팅 방식에 대해서도 궁금해졌습니다! 다음 블로그 게시글은 var, let, const 호이스팅 방식에 대해서 다뤄보려고 합니다!

---

출처 🏷️

자바스크립트의 스코프와 클로저 : NHN Cloud Meetup

[JavaScript] 스코프 체인과 클로저