[실행 컨텍스트] 실행 & 전역 컨텍스트

하서율·2022년 10월 28일

코어자바스크립트

목록 보기

2/4

간단개념정리✍🏻

실행 컨텍스트
실행할 코드에 제공할 환경정보들을 모아놓은 객체.
동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 이를 콜스택에 쌓아올렸다가, 가장위에 쌓여 있는 컨텍스트와 관련있는 코드를 실행하는 식.

전역 컨텍스트
실행 컨텍스트와 같지만 특징은 별도의 실행명령이 없어도 브라우저에서 자동으로 실행된다는 것. 자바스크립트 파일이 열리는 순간, 전역컨텍스트가 활성화 된다고 볼 수 있다.

호이스팅
변수를 끌어올리는 것

스택(stack) & 큐(queue)
스택 (stack) : 출입구가 하나뿐인 데이터 구조. 비어있는 스택에 데이터를 a,b,c,d 순서로 저장했다면 꺼낼때는 위부터 d,c,b,a 순서로 꺼낼수 밖에 없다.
큐 (queue) : 양쪽이 열려있는 데이터구조. 종류에 따라 양쪽모두 입력과 출력이 가능한 큐도 있으나 일반적으로 한쪽은 입력만, 다른쪽은 출력만 하게된다. 비어있는 큐에 데이터를 a,b,c,d 순서로 저장했다면 꺼낼때 역시 a,b,c,d 순서로 꺼낼수 밖에 없다.

콜 스택
함수의 호출을 기록하는 자료구조. 자바스크립트에서 함수를 실행 시킬때 스택위에 올리고(push) 함수로부터 반환을 받을때 스택의 맨위부터 차례로 가져온다(pop).
브라우저 콘솔의 빨간색 에러들이 콜스택의 현재 상태를 나타낸다(실패한 함수를 쌓여있는 순서대로 보여줌)

✅ 실행 컨텍스트와 콜스텍

// 예시코드
var a = 1                 // 1번
function outer () {
	funcrtion inner () {
    	console.log (a);
    	var a = 3
        }
	inner();              // 2번
	console.log(a);
}
outer();                  // 3번
console.log(a)

[전체 프로세스(실행/제거)]

▶️실행순서해석💡

처음 자바스크립트 코드를 실행하는 순간 전역 컨텍스트가 콜스택에 담김 (1번)

↳ 전역 컨텍스트와 관련된 코드들을 순차로 진행

↳ outer 함수 가 호출됨 (3번)

↳ 자바스크립트 엔진이 outer 함수에 대한 환경정보를 수집한 후 outer 실행컨텍스트를 생성하여 콜스택에 담는다. (현재 콜스택의 맨위에 outer 실행컨텍스트가 놓인 상태)

↳ 전역컨텍스트와 관련된 코드의 실행을 일시중단하고 outer실행 컨텍스트와 관련된 코드 (함수내부의 코드)들을 순차로 실행

↳ outer의 내부함수인 inner 함수 가 실행되며 콜스택의 맨위에 inner 실행컨텍스트가 놓이게됨 (2번)

↳ outer 컨텍스트와 관련된 코드의 실행을 일시중단하고 inner실행 컨텍스트와 관련된 코드 (함수내부의 코드)들을 순차로 실행

▶️ 제거순서💡

inner 함수 내부에서 a변수에 값3을 할당하고 inner함수 실행 종료

↳ inner실행 컨텍스트가 콜스택에서 제거됨

↳ 일시중단 되었던 outer 컨텍스트가 중단시점부터 재실행(inner함수실행인 2번의 다음줄부터.)

↳ 변수 a의 값을 출력하며 outer함수의 실행이 종료되면 outer실행컨텍스트가 콜스택에서 제거된다

↳ 콜스택에 전역컨텍스트만 남아있게되며 일시중단되었던 전역컨텍스트가 실행 (outer함수실행인 3번의 다음줄부터.)

↳ a변수의 값을 출력하며 전역공간에도 더이상 실행할 코드가 남아있지 않는다면 전역컨텍스트도 제거됨

↳ 콜스택에 아무것도 남지 않은 상태 (종료)

✅ 실행 컨텍스트 수집정보

실행컨텍스트가 활성화 될 때 자바스크립트 엔진에서 수집하는 환경정보들에는 variableEnvironment , LexicalEnvironment, ThisBinding이 있다.

▶️ variableEnvironment & LexicalEnvironment

현재 컨텍스트 내의 식별자들에 대한 정보 + 외부환경 정보가 담긴다.(environmentRecord & outer-EnvironmentReference)
담기는 내용은 같지만 variableEnvironment에 먼저 정보를 담아 최초 실행시의 스냅샷을 유지 (원본유지) 하고 LexicalEnvironment에는 이를 복사하여 변경사항을 반영하여 주로 사용한다는 차이점이 있다.