TIL 06 - 실행 컨텍스트

hojung choi·2021년 5월 24일

Pop TIL context js push stack

js

목록 보기

7/17

실행 컨텍스트

자바스트립트 엔진은 실행 가능한 코드(Executable Code)를 만나면 그 코드를 평가해서 실행 문맥(Execution Context)으로 만든다. 이 실행 가능한 코드(Executalbe Code)의 유형은

전역코드 : 전역객체 window아래에 정의된 함수
함수코드 : 함수
eval코드 : eval 함수 (별도의 동적 환경에서 실행된다)

실행 문맥의 구성

실행 문맥은 실행 가능한 코드가 실제로 실행되고 관리되는 영역으로 실행에 필요한 모든 정보를 컴포넌트 여러 개가 나누어 관리한다

//실행문맥
ExecutionContxt = {
  //렉시컬 환경 컴포넌트
  LexicalEnvironment : {},
  // 변수 환경 컴포넌트
  VariableEnvironment : {},
  // 디스 바인딩 컴포넌트
  ThisBinding : null,
}

렉시컬 환경 컴포넌트와 변수 환경 컴포넌트

렉시컬 환경 컴포넌트와 변수 환경 컴포넌트는 타입이 같고 with값을 사용할 때를 제외하면 내부값이 같으므로 똑같이 취급해도 무리가 없다.
따라서 이후부터는 렉시컬 환경 컴포넌트로 통일하여 설명한다!

렉시컬 환경 컴포넌트는 자바스크립트 엔진이 자바스크립트 코드를 실행하기 위해 자원을 모아둔 곳이다.

렉시컬 환경 컴포넌트는 환경레코드와 외부 레시컬 환경 참조 컴포넌트로 구성되어 있다

LexicalEnvironment : {
    //환경 레코드
    EnvironmentRecoed: {},
    //외부 레시컬 환경 참조
    OuterLexicalEnvironment Reference:{}
  }

환경 레코드

유효범위 안에 포함된 식별자를 기록하고 실행하는 영역

외부 레시컬 환경 참조

함수 중첩시 함수를 둘러싸고 있는 코드가 속한 렉시컬 환경 컴포넌트의 참조가 저장된다. 중첩된 함수 안에서 바깥 코드에 정의된 변수르르 읽거나 써야할 때 자바스크립트 엔진은 외부 렉시컬 환경 참조를 따라 한 단계식 렉시컬 환경을 거슬로 올라거서 그 변수를 검색한다

전역환경

자바스크립트 인터프리트는 시작하자마자 렉시컬 환경 타입의 전역환경(Glabal Envioronment)을 생성한다. 최상위 레벨의 this는 전역객체를 가르킨다.

this === window // true

프로그램 실행

실행 문맥은 스택이라는 구조로 관리된다.
스택이란 일종의 자료 구조로 데이터를 아래에서부터 쌓아올려 마지막으로 추가한 데이터를 먼저 꺼내는 '후입선출'방식으로 관리된다.

스택의 가장 윗부분에 데이터를 쌓는 행위를 push라고 하고, 스택의 가장 윗부분에서 데이터를 빼내는 행위를 pop이라고 한다.

가장 먼저 실행하는 코드는 전역 코드이다.
함수는 호출에 의해 push가 되고 함수의 작업이 종료 된 뒤 함수를 호출한 부분으로 제어권이 돌아오면 스택에서 pop이 된다

const global = '전역입니다.';
const text = '안녕하세요';
let name = 'Kim';

const sayHello = (text, name) => `${text}. ${name}입니다.`

const print = (text) => {
	let name = 'Lee';
	const innerFunc = () => {
		let name = 'Choi';
		console.log(global); //
		console.log(name); //
	}
	console.log(text);// 
	console.log(name); //
	innerFunc(); //
	console.log(sayHello(text,name)); 
}

print('반갑습니다!');
console.log(sayHello(text,name));