<Frontend> JavaScript / 실행 컨텍스트

2024.03.24 - [IT] - JavaScript 기초 및 용어

<Frontend> JavaScript 기초 및 용어

 

지난 글에 이어 JavaScript의 기초를 알아보고 용어를 정리해 보겠습니다.

---

실행 컨텍스트 (Execution context)

JavaScript에서 실행 컨텍스트가 무엇인지, 어떻게 동작을 하는지 알아보겠습니다.

 

 

실행 컨텍스트(Execution context)란?

https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Data_stack.svg/450px-Data_stack.svg.png

•  코드에 제공할 환경 정보들을 모아둔 객체.
• JS는 실행 컨텍스트를 Call Stack에 쌓아 올린 후 컨텍스트와 관련 있는 코드들을 실행한다.  (전체 코드의 환경과 순서 보장)

 

 

JS의 실행 컨텍스트가 쌓이는 방식

1. JS 코드 실행 시 Global Execution context가 Call Stack에 쌓임.

 

2. 함수가 실행될 경우 해당 함수의 Execution Context가 Call Stack에 쌓임.

 

3. 함수 종료 시 해당 Execution Context가 사라짐. (메모리상에는 존재하며 GC에 의해 없어짐.)

 

4. 모든 코드가 종료되면 Global Execution Context도 사라짐.

 

** Global Execution Context는 전역으로 선언된 변수, 함수의 환경 정보를 가진다.

 

 

 

- 컨텍스트가 쌓이는 예시 -

var a = 10;
function outer() {
  var b = 20;

  function inner() {
    var c = 30;
    console.log(c); // 30
  }
  inner();
  console.log(b); // 20
}

outer();
console.log(a); // 10

1. 코드 실행 시 Global Execution Context가 Call Stack에 쌓임.
2. outer의 Execution Context가 생성되고 Call Stack에 쌓임.
3. inner의 Execution Context가 생성되고 Call Stack에 쌓임.
4. console.log(c) Execution Context가 생성되고 Call Stack에 쌓임.
5. 30 출력 후 console.log(c) Execution Context가 Call Stack에서 사라짐.
6. inner Execution Context가 Call Stack에서 사라짐.
7. console.log(b) Execution Context가 생성되고 Call Stack에 쌓임.
8. 20 출력 후 console.log(c) Execution Context가 Call Stack에서 사라짐.
9. console.log(a) Execution Context가 생성되고 Call Stack에 쌓임.
10. 10 출력 후 console.log(c) Execution Context가 Call Stack에서 사라짐.
11. Global Execution Context가 Call Stack에서 사라짐.

---

Execution Context가 가지는 정보

• VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보, 선언 시점의 LexicalEnvironment의 스냅샷으로, 변경 사항은 반영되지 않음.
• LexicalEnvironment : 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨.
• This Binding : this 식별자가 바라봐야 할 대상 객체 (다음 포스팅 This에서 깊이 다루겠습니다.)

위 3가지의 정보를 수집합니다.

 

** 실행 컨텍스트(Execution Context)와 Hoisting의 동작원리를 정확히 이해해야 JS를 제대로 다룰 수 있습니다.