본문 바로가기
Front-End/JavaScript

23. 실행컨텍스트 (모던 자바스크립트 Deep Dive)

by kk님 2023. 3. 29.

모던 자바스크립트 Deep Dive 글 목록(스터디)

https://hello-kk.tistory.com/780

23. 실행컨텍스트

 

23/03/30

(1) 실행 컨텍스트 스택이란 무엇이며, 어떤 역할을 하나요?

=> 실행 컨텍스트를 저장하는 자료구조입니다. 코드를 평가하는 과정 뒤 실행 컨텍스트가 생성되면 실행 컨텍스트 스택의 최 상단에 푸시하고, 해당 컨텍스트의 실행이 완료되면 스택에서 제거합니다. 이 과정을 통해 함수 호출 순서를 관리합니다.

(2) 실행 컨텍스트와 렉시컬 환경의 역할과 구조는 각각 무엇인지, 그리고 실행 컨텍스트와 렉시컬 환경의 관계를 설명해주세요

=> 실행 컨텍스트는 식별자, 스코프, 실행 순서를 관리합니다. 렉시컬 환경을 통해 식별자와 스코프를 관리하고, 실행 컨텍스트 스택을 통해 실행 순서를 관리합니다. 실행 컨텍스트는 코드를 실행하는데 필요한 환경 정보를 갖습니다. 변수와 스코프 체인, this 값, 렉시컬 환경을 포함합니다.

렉시컬 환경은 식별자와 스코프를 관리합니다. 식별자에 바인딩된 값을 갖는 '환경 레코드'와 상위 스코프를 참조하는 '외부 렉시컬 환경에 대한 참조'를 포함하는 자료구조입니다. 환경 레코드에는 지역변수, args, 매개변수 등을 포함하고 외부 렉시컬 환경에 대한 참조는 상위 스코프의 렉시컬 환경을 참조합니다.

(3) JavaScript에서 "this" 키워드란 무엇이며 실행 컨텍스트에서 어떻게 결정되나요?

=> 현재 실행되고 있는 컨텍스트 내에서 참조하는 객체를 나타냅니다. 전역 코드에서 this는 window를 의미합니다. 메서드를 호출했을 때는 메서드를 호출한 객체가 this가 됩니다. 즉, 실행 컨텍스트가 생성될 때 동적으로 결정됩니다.

(4) 전역 코드 실행중 코드의 제어권이 넘어가는 상황을 한 가지 예시로 들어보세요

=> 함수가 호출될 때 입니다.

(5) 실행 컨텍스트는 어떤 정보를 담고 있나요?

=> 코드 실행에 필요한 환경 정보를 담고 있습니다. 변수와 스코프 체인, this 값, 렉시컬 환경 등을 포함합니다.

실행 컨텍스트가 생성되면서 렉시컬 환경이 생성되고, 환경 레코드와 외부 렉시컬 환경에 대한 참조를 포함합니다. 

전역 환경 레코드와 함수 환경 레코드에 저장되는 정보에는 차이가 있습니다.


다시 되짚어 본 내용
(1) 코드를 평가한다는 것: 변수, 함수의 선언문이 실행되고 식별자를 키로 (실행 컨텍스트의 )렉시컬 환경 환경 레코드에 등록됨
(2) 코드 평가 과정에서, 호이스팅으로 변수 선언부가 실행 컨텍스트에 저장된다. 실행 컨텍스트는 실행 컨텍스트 스택에 추가된다. 코드가 실행되면서 
(3) 실행 컨텍스트와 렉시컬 환경이 비슷하게 생각되어서, 순서를 생각해보기로 함
코드 평가
실행 컨텍스트
실행 컨텍스트 스택
렉시컬 환경 바인딩
렉시컬 환경(환경 레코드, 외부 렉시컬 환경에 대한 참조)
환경 레코드(객체 환경 레코드, 선언적 환경 레코드, 함수 환경 레코드와 전역 환경 레코드는 차이가 있다.), argument, 변수, 함수선언, var 과 let const 차이
외부 렉시컬 환경에 대한 참조->이전의 렉시컬 환경 참조(전역이면? null)
this 바인딩

(4) 전역 Environment Record에 포함되는 객체 환경 레코드와 선언적 환경 레코드의 차이
객체 환경 레코드에는: var(는 함수범위) , 전역객체
선언적 환경 레코드에는: let const는 {}: 블록 범위. (따라서 {}생기면 렉시컬 환경 생성)

var로 선언한 변수는 window 전역 객체의 프로퍼티에 속하지만, let 으로 선언한 변수는 그렇지 못하다.

(5) 실행 컨텍스트란?
정작 실행 컨텍스트를 설명 못했는데, (코드평가 이후 실행컨텍스트에 푸시되는 것? 아니면 실행 컨텍스트에 바인딩된 렉시컬 환경 그리고 환경레코드랑 아우터환경 레퍼런스.. 객체환경레코드 선언적 환경 레코드.. 를 담은 것? 이라고 해야하나 했는데 이런건 정의는 아니지만 여기에 답이 있었다)
=> 코드 실행 단계에서 필요한 환경 정보를 모아놓은 객체

(6) 전역 환경 레코드는 2개의 환경 레코드로 구성되지만
함수 환경 레코드는 그 자체만을 갖는다

 

(7) 함수의 상위 스코프? => 13단원 스코프 참고

 가설 1. 호출 시점

 가설 2. 정의한 위치 : 렉시컬 스코프를 따른다~!

var x= 'hello'

function fx (){
	var x = 'kk'
	console.log(x) // (1)
	fy()
}

function fy() {
	console.log(x) // (2)
}

fx();
//(1):
//(2):

(8) 실행 컨텍스트 스택에 푸시되는 시점?

처음에는 평가가 될때 실행 컨텍스트가 생겨서 스택에 푸시되는 것이라 생각했는데, 그러면 실행되는 실행 컨텍스트가 최상단에 .. 오는지 어떻게 알지? 였는데, 아래처럼 foo를 먼저 선언, boo를 다음에 선언하면 (단순하게 생각했을 때) foo가 먼저 평가된 뒤 실행컨텍스트가 생성된 후 foo 가 실행 컨텍스트 스택에 쌓이고, boo가 평가된 뒤 실행컨텍스트가 생성되고 스택에 쌓이면 .. '실행 컨텍스트 스택의 최상단에 놓여있는건 현재 실행중인 실행컨텍스트'와  조금 다른 의미가 될 수 있지 않나라는 생각이 들었고

function foo(){
}

function boo(){
}
foo()
boo()

책을 읽었을 때 함수가 호출(실행)될 때 실행 컨텍스트 스택에 올라간다는 의미를 이해했다.

우선적으로 평가 과정은 거치되, 전역 렉시컬 환경에는 식별자처럼 올라가지만 실제로 실행 컨텍스트 스택에는 올라가지 않는다는 의미로 이해했다. 

 

Variable ?