150. [JS] JavaScript 실행컨텍스트(Execution Context) TIL 23.04.25

---

 

실행컨텍스트(Execution Context)

실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있다.
실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

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

 

실행 컨텍스트는 실행가능한 코드가 실행되기 위해 필요한 환경
실행가능한 코드 3가지

- 전역 코드 : 전역 영역에 존재하는 코드
- Eval 코드 : eval()로 실행되는 코드
- 함수 코드 : 함수 내에 존재하는 코드

 

자바스크립트 엔진은 코드를 실행하기 위해 여러 가지 정보가 필요함
실행에 필요한 정보 4가지

- 변수 : 전역변수, 지역변수, 매개변수, 객체의 Property
- 함수 선언
- 변수의 유효범위 (Scope)
- this

 

 

ex) 실행 컨텍스트 스택 생성 소멸

var a = '사과'

function outer() {
	var b = '키위'
    
    function inner() {
    	console.log(a + b)
    }
    
    inner()
}

outer()

1. 전역코드 실행 (global EC추가)

2. outer() 실행 (outer() EC추가)

3. inner() 실행 (inner() EC추가)

 

 

 

실행 컨텍스트의 3가지 Property

1. 변수객체(Variable Object) :
이 객체는 현재 컨텍스트에서 사용할 변수, 함수 선언 등의 정보를 담고 있음

2. 스코프 체인(Scope Chain) : 
현재 실행 컨텍스트의 변수 객체와 상위 실행 컨텍스트의 변수 객체를 연결한 체인

3. this :
함수가 호출될 때 결정되며, 전역 컨텍스트에서 전역 객체를 참조

 

 

실행 컨텍스트(Execution Context) 속 정보

VariableEnvironment : 
현재 컨텍스트에서 선언된 변수와 함수 식별자를 저장

var로 선언된 변수는 VariableEnvironment 내에서 처리됨
var로 선언된 변수는 함수 스코프에서 선언된 것으로 간주되어 해당 함수의 VariableEnvironment  내부에 저장됨

LexicalEnvironment :
현재 컨텍스트에서 선언된 변수와 함수 식별자뿐만 아니라, 현재 컨텍스트를 둘러싼 스코프 체인에 있는 변수와 함수 식별자까지 모두 저장

let, const로 선언된 변수는 LexicalEnvironment 내에서 처리됨
이는 블록 스코프를 가지는 변수로, 해당 변수가 정의된 블록 범위 내에서만 유효

함수 내부에서 변수나 함수를 선언하는 경우 LexicalEnvironment는 그 정보를 업데이트하고,
VariableEnvironment는 업데이트되지 않음 함수의 호이스팅 때문

 

 

 

 

위에 글 내용은 오류 사항이 존재할 수 있습니다!

수정 사항이 있을 시 알려주시면 감사하겠습니다.