자바스크립트 Execution Context (실행 컨텍스트)

 글을 쓰기 앞서 모든  내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여  작성하였습니다.
출처: https://inf.run/xNcEg
오늘은 Execution Context에 대해 알아보겠습니다.  개념부터 짚고 진행하겠습니다.

[지금 무료] [코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 강의 - 인

우선 Execution Context(실행 컨텍스트)란?  JS 코드와 코드를 실행할 때 필요한 정보를 담고있는 특정 환경이라고 보시면 됩니다. 즉, 코드 실행에 필요한 모든 데이터를 들고있는 환경이라고 생각하면 됩니다.  

Execution Context는 세 가지로 나뉘는데요. Global Context와,   Function Context,   Eval Function Execution Context   로 나뉩니다.  각 컨텍스트 마다 특징이 있습니다.

 

1. Global Exection Context(전역 실행 컨텍스트) - 자바스크립트 코드가 시작하면 가장 먼저 생성되는 실행 컨텍스트 입니다. 
- 전역 변수와 전역 함수를 포함하며, window 객체를 this로 가리키는 것이 특징입니다.
2. Function Execution Context (함수 실행 컨텍스트) - 함수가 호출될 때마다 생성됩니다.
 - 각 함수 실행 컨텍스트는 자신만의 변수 객체, 인수 객체, 스코프 체인을 갖습니다.
 - this는 해당 함수를 호출한 객체를 가리킵니다.
3. Eval Function Execution Context ( Eval 함수 실행 컨텍스트) -  eval 함수에 의해 실행되는 컨텍스트 입니다.

다음은 자바스크립트에서 코드의 실행을 관리하기 위해 Execution Context Stack 또는  콜 스택(Call Stack)이라는 개념을 사용하는데요, 실행 컨텍스트 스택(Execution Context Stack)은 실행 중인 컨텍스트들을 쌓아놓는 공간이라고 생각하시면 편합니다. 

Execution Context Stack (실행 컨텍스트 스택) 두 개의 단계를 알아보겠습니다. Creation Phase(생성 단계), 와 Execution Phase(실행 단계) 두 개의 단계를 비교해보겠습니다.

예시를 두기 위해 HTML 코드로 작성하여  Visual Studio Code 에서 Open with Live Server 를 통해 소스를 작성한 것을 웹 브라우저 에서 확인해보겠습니다.

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

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

   three();
</script>

소스를 작성하고 저는 이 두개의 확장 프로그램을 설치하였습니다. 

저는 Edge로 열어서 개발자 도구에 들어가서 소스를 눌러서 Visual Studio Code 에서 입력한 소스랑 맞는지 비교해봤습니다.

중단점(Debug)이라고 들어보셨나요? -> 디버깅 과정에서 코드의 실행을 일시적으로 중단(멈추다)하는 지점을 의미합니다. 저는 19번째 줄을 중단점을 지정해봤습니다.  옆에 보시면 범위(Scope)에 글로벌 스코프(Global Scope)가 생성되고  그 옆에 글로벌 스코프가 윈도우(Window)로 설정되어 있는 것을 볼 수 있습니다. -> 웹에서는 글로벌 스코프(Global Scope)가 Window로 설정됩니다. 호출 스택(Call Stack)에 execution Context 가 생성되는데요  바로 최상위  글로벌 실행 컨텍스트( Global Execution Context)라는 겁니다. 여기서 표시한 버튼을 누르면 다음 호출되는 함수로 들어가는 기능입니다.  새로 고침(F5)하고 실행하시면 됩니다.

버튼을 누르면 three() 함수가 실행이 되면서 내부로 들어가는데요,  호출 스택(Call Stack)을 보면 three() 라는 함수가 글로벌 실행 컨텍스트(최상위 실행 컨텍스트)위에 올라가는 것을 볼 수 있습니다. 다음도 예상이 되시나요?

second() 함수를 실행하면 second() 함수가 호출 스택(Call Stack)에 올라갑니다. 

 

 

 

first() 함수가 Call Stack(호출 스택)에 올라가는 것을 볼 수 있습니다.

 

여기서 first() 함수가 호출 스택(Call Stack)에서 사라진 것을 볼 수 있습니다. 

 

 

여기서도 실행하면 Second() 함수가 사라지는 것을 볼 수 있습니다.

 

 

마지막으로 실행 버튼(재생 버튼)을 누르면 Call Stack(호출 스택)에 아무 겂도 없는 것을 볼 수 있습니다. 여기서 알 수 있는 점은 실제로 Execution Context 가 이렇게 실행되는 것을 알 수 있습니다.

이번엔 Creation Phase(생성 단계)와 Execution Phase(실행 단계)     예시 코드를 작성해보겠습니다.

<script>
    var num1 = 100;
    var num2 = 500;

    function multi(x, y){
        var result = x * y;

        return result;
    }

   var result1 =  multi(num1, num2);
   var result2 =  multi(100,300);
</script>

먼저 소스코드를 작성해주시고 위에 같은 방식으로 웹 브라우저에서 개발자 도구에서 확인하시면 됩니다. 저는 번역한 상태라서 이렇게 뜹니다.

 

Window 오브젝트(global Scope) 안에  num1 변수와 num2 각각 지정한 변수와 함수가  저장되어 있는 것을 볼 수 있습니다. 여기서 알 수 있는 점은 글로벌 오브젝트(Global Object)가 생성이 되고 선언된 모든 변수와 함수들이 이미 메모리 힙(Memory heap)에 배정이 된다는 점입니다. (호이스팅 현상과 비슷한 현상이 나타납니다)

실행하면 각각  실행한 구문에 값이 변경되는 것을 볼 수 있습니다.

 

multi 함수를 한번 더 실행하면  result 가 호이스팅이 되어서 undefined 가 됩니다.  ( 호이스팅 내용은 자바스크립트 정리한 목록에 있습니다.) 
지금까지 Execution Context(실행 컨텍스트)에 대해 알아보았습니다. 설명이 부족하더라도 양해바랍니다.  감사합니다!!! 읽으시고 한번 댓글 달아주시면 참고하겠습니다.