| JS 자바스크립트 | 자바스크립트 엔진 / 실행 컨텍스트 / 스코프

자바스크립트 엔진(JavaScript engine)

자바스크립트 코드를 실행하여 웹 페이지의 동적인 기능을 제공하는 인터프리터

동작 원리

자바스크립트는 콜스택과 메모리힙이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다.

엔진의 주요 구성요소

1) Memory Heap : 메모리 할당이 일어나는 곳

2) Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳

 

 

Execution Context (실행 컨텍스트)

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

자바스크립트는 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고 호이스팅, 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행한다.

 

컨텍스트의 구성 요소

• Variable Environment — 현재 컨텍스트 내부의 식별자 정보, 외부 환경 정보가 포함
• Lexical Environment — VariableEnvironment의 초기 상태 및 LexicalEnvironment의 최신 상태를 저장
• This Binding — this 로 지정된 객체의 정보를 갖고 있는 것

실행 컨텍스트를 생성할 때는 VariableEnvironment와 LexicalEnvironment가 동일한 내용으로 구성되지만 LE는 함수 실행 도중에 변경되는 사랑이 즉시 반영되는 반면, VE는 초기 상태를 유지한다.

 

 

컨텍스트 효과

• 실행 컨텍스트로 인해 엔진은 함수를 빠르게 처리할 수 있음
• 코드의 환경과 순서를 보장할 수 있음.

 

💡 어떻게 코드의 환경과 순서를 보장할 수 있는가?

동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구헝하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

 

 

Identifier Resolution (식별자 해결)

사용할 변수 및 함수를 결정하는 것

• 스코프 내에서 이름을 찾기위해 스코프에 이름을 설정함.
• 스코프 내에 설정된 변수 또는 함수의 값은 변경되지만, 이름은 벼경되지 않음.
• ⇒ 식별자 해결의 대상은 이름

 

Scope (스코프)

스코프란 식별자에 대한 유효범위를 의미한다.

 

• A의 외부에서 선언한 변수는 A의 외부 뿐만 아니라 A의 내부에서도 접근이 가능하지만,
• A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근할 수 있다.
• 이렇듯 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것을 스코프 체인이라고 한다.
• 이러한 구조적 특성으로 인해, 여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능하게 된다.

스코프 예제

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

• (1) : 식별자 a에 접근하고자 할때, 현재 활성화 상태인 inner 컨텍스트의 a를 검색한다. a는 발견되었지만, 아직 값이 할당되지 않은 상태이므로 undefined가 출력된다.
• (2) : 식별자 a에 접근하고자 할 때, outer함수 내에는 a가 선언되지 않았고, outerEnvironment인 전역 환경에 a가 있으므로, 그 a에 저장된 값 1을 출력한다.
• (3) : 현재 활성화 상태인 전역 컨텍스트의 a를 검색하여, 1을 출력한다.

 

 

 

참고

https://inf.run/5Fkp

자바스크립트 중고급: 엔진 핵심 강의 - 인프런