Bin's Blog

실행 컨텍스트 본문

JavaScript

실행 컨텍스트

hotIce 2023. 5. 8. 09:20
728x90

1. 실행 컨텍스트란?

  • 실행 컨텍스트는 컴퓨터 프로그램이 실행되는 동안 필요한 정보를 저장하고 관리하는 공간(실행할 코드에 제공할 환경 정보를 모아놓은 객체) 
  • 컨텍스트는 프로그램이나 시스템이 작동하는 특정 조건이나 상황.
  • 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 콜 스택에 쌓아올렸다가 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 
  • 우리가 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것뿐이다.
  • 실행 컨텍스트와 콜 스택
var a = 1;
function outer() {
    function inner() {
        // undefined
        console.log(a);
        var a = 3;
    }
    inner();
    // 1
    console.log(a);


}

outer();
// 1
console.log(a);
  • 위의 구조가 콜 스택에 쌓이는 순서는 전역 컨텍스트 -> outer -> inner 이런 순으로 쌓이게 된다. 
  • 제거되는 순서는 inner -> outer -> 전역 컨텍스트이다. 
  • 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점이다. 
  • 어떤 실행 컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는 데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장한다. 
  • innerText 안에 variableEnvironment, LexicalEnvironment, ThisBinding이 존재한다.
    • VariableEnvironment
      • 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보, 선언 시점의 LexicalEnvironment의 스냅샷으로 변경 사항은 반영되지 않음
      • 담기는 내용은 LexicalEnvironment와 같지만 최초 실행 시의 스냅샷을 유지한다는 점이 다르다. 
      • 실행 컨텍스트를 생성하게 되면 VariableEnvrionment에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LexicalEnvironment를 만들고, 이후에는 LexicalEnvironment를 주로 활용한다. 
    • LexicalEnvironment
      • 컨텍스트를 구성하는 환경 정보들을 사전에서 접하는 느낌으로 모아놓은 것  
      • 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영된다.

 

 

 

 

*콜 스택(call stack): 프로그램이 실행되는 동안 함수들의 호출 순서와 관련된 정보를 저장하는 공간이다. 어떤 함수를 호출했고, 어떤 순서로 돌아가야 하는지를 기록하는 일종의 "일지"라고 생각하면 된다. 접시를 쌓을 때 접시가 쌓이면 가장 위에 접시부터 차례대로 꺼내는데 이게 스택의 원리이고, 함수를 호출할 때마다 콜 스택에 정보가 쌓인다. 함수가 작업을 끝내고 종료되면, 그 함수의 정보를 꺼내고 이전함수로 돌아간다. 

 

*전역 컨텍스트(global context): 프로그램이 실행되는 동안 가장 기본이 되는 실행 컨텍스트, 자바스크립트 파일이 열리는 순간 전역 컨텍스트가 활성화 된다. 프로그램 전체에서 사용할 수 있는 변수, 함수, 객체와 같은 정보를 담고 있고 어느 부분에서든지 접근하고 사용가능하다. "공용 도서관"과 같은 의미이다. 콜 스택에 가장 먼저 생성되고 프로그램이 끝날 때까지 존재한다. 전체에서 공유되는 정보들을 저장하고 관리한다.

 

* 스냅샷 (snapshot): 코드 실행 도중에 변경되는 식별자에 대한 정보를 반영하지 않고, 해당 컨텍스트에서의 식별자들에 대한 초기 상태를 나타낸다. 이후에 발생하는 변수 할당, 함수 호출 등의 변경 사항은 스냅샷에 반영되지 않는다.

728x90

'JavaScript' 카테고리의 다른 글

JSON  (0) 2023.05.09
let, const 그리고 var  (0) 2023.05.08
undefined와 null  (0) 2023.05.05
Map() 객체  (0) 2023.05.04
불변 객체  (0) 2023.05.03