JavaScript의 Execution Context Stack

이번에는 자바스크립트의 실행 컨텍스트(Excution Context)와 스택에 대해 알아보려고 합니다. 이 개념은 자바스크립트가 코드를 어떻게 읽고 실행하는지를 이해하는 데 매우 중요하답니다 😊

두 가지 HTML 코드를 실행했을 때, 자바스크립트의 실행 흐름과 생성 단계(Creation Phase)와 실행 단계(Excution Phase)의 차이점을 예제로 설명해보겠습니다!

📌 1. 예제 코드 1: Execution Context Stack의 원리

<script>
  function one(){
    console.log('run one');
    console.log('run one finished');
  }

  function two(){
    console.log('run two');
    one();
    console.log('run two finished');
  }

  function three(){
    console.log('run three');
    two();
    console.log('run three finished');
  }

  three();
</script>

실행 화면

📑 코드 분석 - Execution Context의 생성과 실행

1. Creation Phase(생성 단계): 자바스크립트는 코드를 읽을 때 먼저 '생성 단계'를 거쳐요. 이 단계에서 선언된 모든 함수(one, two, three)와 변수들이 메모리에 올라갑니다. 함수들은 Memory Heap에 저장되며, 함수들의 참조는 메모리에 배정되고 나중에 사용할 수 있도록 준비되죠. 이때 아직 함수는 실행되지 않고 메모리만 할당돼요. 사진에서도 num1, num2, result가 이미 실행되지 않았는데 메모리 힙에 벌써 정의되어있다는 것을 볼 수 있습니다.

   

2. Execution Phase(실행 단계): 이제 코드가 실행되면서 각 함수가 호출될 때마다 실행 컨텍스트가 생깁니다. three() 함수가 호출되면, 해당 실행 컨텍스트가 Call Stack에 쌓이게 돼요.

📋 Call Stack의 실행 순서

1. Global Execution Context: 모든 코드가 실행되기 전에 전역 실행 컨텍스트가 Call Stack에 쌓입니다. 이때 모든 함수 선언과 변수는 메모리에 할당되지만, 아직 실행은 되지 않아요
2. three() 호출: three() 함수가 실행되면서 three의 실행 컨텍스트가 Call Stack에 추가됩니다.
3. two() 호출: three 함수 안에서 two() 함수가 호출되면서, two의 실행 컨텍스트가 추가로 쌓입니다.
4. one() 호출: 마찬가지로, two 안에서 one()이 호출되면서 one의 실행 컨텍스트가 쌓입니다.
5. one() 실행 종료: one이 실행을 마치고 Call Stack에서 제거됩니다.
6. two() 실행 종료: 이어서 two의 실행이 끝나고 Call Stack에서 제거됩니다.
7. three() 실행 종료: 마지막으로 three의 실행이 끝나고 Call Stack에서 제거됩니다.
8. Global Context 실행 종료: 이제 모든 함수가 실행되었으므로 전역 컨텍스트도 스택에서 사라집니다.

⭐ 헷갈릴 수 있는 부분: 함수는 호출될 때마다 새로운 실행 컨텍스트를 생성하고, 그 컨텍스트가 Call Stack에 쌓이게 돼요. 그래서 Call Stack이 쌓인다고 표현하는 거죠!

📌 2. 예제 코드 2: 변수와 함수의 메모리 할당과 호이스팅

<script>
  var num1 = 20;
  var num2 = 30;

  function multiply(x, y){
    var result = x * y;
    return result;
  }

  var result = multiply(num1, num2);
  var result2 = multiply(100, 200);
</script>

📑 Creation Phase(생성 단계):

• 글로벌 오브젝트 생성: 자바스크립트는 가장 먼저 전역 컨텍스트를 생성하고, window 객체가 글로벌 객체로 생성됩니다. 이때 전역 스코프에 선언된 모든 변수(num1, num2, result, result2)와 함수(multiply)가 메모리 힙에 배정됩니다.
• 호이스팅: 자바스크립트는 변수를 미리 메모리에 할당하고, 기본값을 undefined로 저장합니다. 그래서 함수나 변수가 코드에서 선언되기 전에 사용되더라도 undefined로 할당되어 있어 호이스팅 현상이 발생할 수 있어요.

📑 Execution Phase(실행 단계):

1. num1과 num2에 각각 20과 30을 할당합니다.
2. multiply 함수가 호출되면 새로운 실행 컨텍스트가 생성되어 Call Stack에 쌓입니다.
3. multiply(num1, num2) 실행 후 결과가 result에 할당되고, 이어서 multiply(100, 200)의 결과가 result2에 할당됩니다

⭐ 중요: 호이스팅 덕분에 변수와 함수가 코드를 실행하기 전에 메모리에 할당됩니다. 이것이 자바스크립트가 변수를 사용할 때 "선언 전에 이미 존재하는 것처럼" 보이는 이유입니다.

📌 Call Stack의 원리와 this 키워드

• Call Stack: 함수를 호출할 때마다 새로운 실행 컨텍스트를 Call Stack에 쌓고, 함수 실행이 끝나면 해당 컨텍스트를 스택에서 제거합니다. 이렇게 순차적으로 쌓고 제거하는 과정이 Call Stack의 핵심입니다.
• this 키워드: this가 window를 가리키는 이유는 이 코드가 웹 환경에서 실행되기 때문이에요. 글로벌 컨텍스트에서는 this가 전역 객체를 참조하게 됩니다.

🛠 정리: 중요 포인트

1. Creation Phase: 모든 함수와 변수가 메모리 힙에 배정되고 변수들은 undefined로 초기화됩니다. 이때 호이스팅이 일어나요.
2. Execution Phase: 각 함수가 호출될 때마다 실행 컨텍스트가 생성되어 Call Stack에 쌓이고, 함수가 끝나면 스택에서 제거됩니다.
3. this가 가리키는 것: 웹 환경에서 전역 스코프의 this는 window 객체를 가리킵니다.
4. Call Stack: 함수 호출 시 실행 컨텍스트가 쌓이고 실행 완료 시 제거되는 과정을 통해 실행 순서를 관리합니다.

⭐ 실무 팁: 코드를 작성할 때, 호이스팅 현상을 이해하고 변수와 함수를 선언하는 위치를 고려하세요. 그리고 this 키워드가 가리키는 대상을 정확히 알고 있어야 예기치 않은 버그를 방지할 수 있어요!