2024-11-06

내일배움캠프 Node.js 트랙 8일차

1. ZEP에서 이루어진 자바 문법 스터디

실행 컨텍스트란?

자바스크립트에서 실행 컨텍스트(Execution Context)는 코드가 실행되는 환경을 정의하는 중요한 개념이다.

 

EC는 코드가 실행될 때 필요한 정보들을 모아놓은 객체로서 변수, 함수, 객체 등의 정보를 포함하고 있다. 이를 통해 자바스크립트는 여러 실행 컨텍스트를 생성하고 관리하거나 코드의 실행 흐름을 제어할 수 있다.

 

실행 컨텍스트는 크게 전역 컨텍스트와 함수 컨텍스트로 나눌 수 있다.(또는 eval()을 통해서도 실행 컨텍스트가 생성되기도 한다.) 우리가 코딩을 할 때 주로 생성하는 실행 컨텍스트는 함수 컨텍스트이기 때문에 하기에서는 이에 대해서만 언급하도록 하겠다.

 

일단은 함수 선언될 때 해당 함수에 필요한 정보를 담은 실행 컨텍스트가 생성된다고 이해하자.

 

1. 실행 컨텍스트의 역할

선언된 변수를 위로 끌어올린다. = 호이스팅(hoisting)

외부 환경 정보(outer Environment Reference)를 구성한다.

this 값을 설정한다.(This Binding)

 

2. 실행 컨텍스트의 구성 요소

실행 컨텍스트는 다음과 같은 주요 구성 요소로 이루어져 있다:

• Lexical Environment(LE) : record + outer
• Variable Environment(VE) : record + outer
• ThisBinding

이러한 구성 요소들은 서로 연결되어 있으며, 실행 컨텍스트가 생성될 때마다 새로운 환경이 설정된다.

출처 : https://joontae-kim.github.io/2020/10/15/excution-context-2/

 

LE와 VE

LE와 VE에 담기는 데이터 항목은 서로 완벽하게 동일하다. 현재 컨텍스트 내의 식별자 정보인 record를 가지고 있고, 외부 환경 정보(=outer) 또한 갖고 있다. 다만 이 둘의 차이는 스냅샷 유지여부이다.

 

LE에는 함수의 선언 시점, 즉 실행 컨텍스트가 생성될 때의 환경 정보의 스냅샷이 담겨있다. LE도 처음에는 VE와 같은 정보를 가지고 있지만, 함수 선언으로 인한 변경사항을 스냅샷에 반영한다.

 

3. 콜 스택과 실행 컨텍스트

콜 스택은 자바스크립트의 함수 호출을 관리하는 구조이다. 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되고, 이 컨텍스트는 콜 스택에 쌓이게 된다. 함수 실행이 끝나면 해당 실행 컨텍스트는 스택에서 제거된다. 이러한 방식으로 자바스크립트는 여러 함수의 실행을 순차적으로 관리한다.

출처 : https://yceffort.kr/2020/06/javascript-execution-context

var x = 1


function foo() {
  var arg = arguments
  var y = 2

  function bar() {
    var z = 3
    console.log(x + y + z) // global EC, foo() EC, bar() EC가 스택에 쌓여 있다. 스코프 체인을 통해 x=1, y=2, z=3.
  }
  bar()
}

foo()


// ECStack(Execution context Stack)
// 1. [global EC] (전역 환경)
// 2. [global EC, foo() EC]
// 3. [global EC, foo() EC, bar() EC]
// 4. [global EC, foo() EC]
// 5. [global EC]

 

 

 

예를 들어, 전역 컨텍스트에서 함수 foo가 호출되면, foo의 실행 컨텍스트가 생성되어 콜 스택에 추가된다. 이후 foo 내에서 또 다른 함수 bar가 호출되면, bar의 실행 컨텍스트가 생성되어 다시 콜 스택에 추가된다. 이처럼 콜 스택은 실행 컨텍스트의 생성과 제거를 통해 함수의 실행 흐름을 관리한다.

출처 : https://frontj.com/entry/7-Javascript%EC%9D%98-this%EC%99%80-execution-context

6. 참고 자료

• 티스토리: 자바스크립트 실행 컨텍스트란?
• 감구마: JS Execution Context (실행 컨텍스트) 란?
• velog: 실행 컨텍스트 정의와 종류
• 티스토리: 실행 컨텍스트 - SO's CODE