Exeuction context(실행 컨텍스트)
아주 모호하다. 처음에 이 단어를 들었을 때 JS 엔진이 코드를 어떻게 읽고 실행해 나가는지에 대한 흐름을 얘기하는 줄 알았는데 다른 개념이었다.
실행 컨텍스트에 걸쳐있는 다른 개념들도 많다보니
실행 컨텍스트를 잘 이해하려면 알아야할 것들이 많다.
예를 들면, 스코프, 렉시컬 환경, 콜스택, 큐, 힙..정도 떠오른다
먼저 Execution context의 정의부터보자
ChatGPT와 Bard에게 물어봤다
ChatGPT
실행 컨텍스트(Execution Context)는 코드가 실행되는 환경을 나타내며, 현재 실행 중인 코드의 상태 및 정보를 저장하는 객체입니다. 실행 컨텍스트는 코드가 실행될 때 생성되고, 함수가 호출될 때마다 새로운 실행 컨텍스트가 스택에 추가됩니다. 스택에서는 현재 실행 중인 컨텍스트가 맨 위에 위치하며, 함수가 실행을 완료하면 스택에서 해당 컨텍스트가 제거됩니다.
Bard
자바스크립트에서 실행 컨텍스트(execution context)는 코드의 실행을 나타내는 객체입니다. 실행 컨텍스트는 다음과 같은 정보를 포함합니다.
-선언된 변수 및 함수의 범위(scope)
-함수의 호출 스택(call stack)
-this 값
둘다 맞는 말이긴한데
ChatGPT가 더 설명을 잘한것 같다. 여담이지만 보통 두개다 띄워놓고 질문하는데 Bard가 할루시네이션도 더 많고 ChatGPT에 비해서 성능이 떨어지는 것 같다.
ChatGPT의 답변 중
'실행 컨텍스트는 코드가 실행될 때 생성되고'에서 실행될 때는
Global Code(전역코드)를 의미하고
'함수가 호출될 때마다 새로운 실행 컨텍스트가 스택에 추가됩니다.'에서는
Function Code(함수 코드)를 의미한다.
그러니까 코드를 처음 읽어 내려갈때
전역 실행 컨텍스트를 생성하고
함수 호출을 만나면 콜 스택의 전역 실행 컨텍스트 위에 함수 실행 컨텍스트를 쌓는 것이다.
지난 번 콜스택에 대한 글에서 콜스택에 단순하게 foo(), bar(), main() 이렇게 쌓이는 것으로 설명했는데 더 자세히 파고들면
사실 각 함수의 execution context가 쌓이(stack)는 것이다.
Execution context의 구조
Execution context는 Lexical environment, Variable environment로 나뉜다.
아래와 같다
- Execution context
- Lexical environment
- Outer Environment Reference
- Environemnt Records
- Object environment records
- Declarative environment records
- Variable environment
- Outer Environment Reference
- Environemnt Records
- Object environment records
- Declarative environment records
- Lexical environment
-
Environemnt Records
변수, 함수의 식별자(Identifier)와 값을 관리1.1 Object Environment records
거의 사용되지 않는다. with 문을 쓰는 등 특별한 경우에만 사용된다.
1.2 Declarative environment records(선언적 환경 코드)
함수, 변수, this` 등 식별자 바인딩이 저장된다. -
outer environment reference
외부 참조. 즉 실행 컨텍스트의 상위 컨텍스트의 environment와 연결돼있다. 이렇게렉시컬 환경의외부 참조 환경이 상위렉시컬 스코프와 연결돼 있는 것은 Lexical Nesting Sturcture라고 한다.
스코프 체인과 closure에서 사용된다.
Variable environment ?
다시 보자
왜 Execution context 를 Lexical과 Variable 로 나눈 것일까?
ES5 에서 등장한 let, const 변수들의 block scope와 관계가 있다.
블록 스코프는 한 함수 안에서 여러 Lexical scope가 생길 수 있따.
예를 들어보자
function Hi(){
let let1 = 'I am let1';
var var1 = 'I am var1';
if(true){
let let2 = 'I am let2';
var var2 = 'I am var2';
}
}위 코드를 보면 Hi Function의 EC 안에 Lexical Env가 생기고 if 구문을 따로 구분하는 Lexical Env가 생겨야한다.
하지만 반대로 var 는 함수 레벨에서 동일하게 사용되므로 Variable Env 하나만 있어도 되는 것이다.
스코프 레벨과 호이스팅 방식이 다른 것 때문에 VE, LE가 나뉘게 된 것이다.
그림으로 보면 아래와 같다.
이미지 출처 - https://m.blog.naver.com/dlaxodud2388/222655214381
참고자료
https://velog.io/@himprover/JavaScript%EC%9D%98-%EC%8B%A4%ED%96%89%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%8A%94-%EB%AD%98%EA%B9%8C#javascript-engine%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%98%EB%8A%94%EA%B0%80 (⭐⭐⭐)
https://github.com/im-d-team/Dev-Docs/blob/master/Javascript/Javascript%EC%9D%98_%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC-%EC%8B%A4%ED%96%89%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8(Execution%20Contexts).md (⭐)
https://medium.com/hcleedev/web-javascript%EC%9D%98-%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8-lexicalenvironment-scop-ce664aa2076 (⭐⭐)
https://m.blog.naver.com/dlaxodud2388/222655214381 (⭐⭐)
