[JavaScript] 실행 문맥 (Execution Context)

안녕하세요. J4J입니다.

 

이번 포스팅은 실행 문맥에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

실행 문맥이란?

 

실행 문맥은 말 그대로 자바스크립트에서 코드가 실행되는 문맥을 의미하는 추상적인 용어입니다.

 

문맥마다 소유하고 있는 변수, 상위 문맥들의 변수를 찾는 스코프 등에 대한 정보들을 가지고 있습니다.

 

실행 문맥은 3가지로 나눌 수 있습니다.

 

• 전역 실행 문맥
• 함수 실행 문맥
• Eval 실행 문맥

 

전역 실행 문맥은 자바스크립트가 실행되는 순간 만들어지는 실행 문맥을 의미합니다.

 

함수 실행 문맥은 함수가 실행되는 순간 만들어지는 실행 문맥을 의미합니다.

 

Eval 실행 문맥은 Eval 함수가 실행되는 순간 만들어지는 실행 문맥을 의미합니다.

 

 

실행 문맥 속성

 

실행 문맥의 속성 값들도 3가지가 존재합니다.

 

• argument objects
• scope chain
• this

 

argument objects는 실행 문맥이 생성될 때 존재하는 paramter값이나 내부 변수 및 함수들을 의미합니다.

 

scope chain은 자기 자신을 포함하여 상위 실행 문맥의 변수를 찾아 사용할 수 있는 범위를 의미합니다.

 

this는 코드를 실행한 object를 의미합니다.

 

 

 

예를 들어 다음과 같이 값을 계산하는 코드가 있다고 가정해보겠습니다.

 

<script>
    let globalPrice = 3;
    function calc(paramPrice) {
        let calcPrice = 5;
        let sum = globalPrice + paramPrice + calcPrice;

        console.log(sum);
    }

    calc(4);
</script>

 

 

이 코드에서 실행 문맥은 전역 실행 문맥, calc함수 실행 문맥 총 2개의 실행 문맥이 존재합니다.

 

그리고 여기서 실행 문맥들의 속성 값들을 다음과 같이 표현할 수 있습니다.

 

전역 실행 문맥(global execution context) {
    argument objects: ['globalPrice', 'calc']
    scope chain: ['global execution context']
    this: 'window'
}

calc함수 실행 문맥(calc function execution context) {
    argument objects: ['paramPrice', 'calcPrice', 'sum']
    scope chain: ['calc function execution context', 'global execution context']
    this: 'window'
}

 

 

반응형

 

 

부연 설명을 드리면 전역 실행 문맥의 argument objects에는 파라미터 값은 존재하지 않고 내부 변수나 함수들은 globalPrice, calc가 있습니다.

 

scope chain은 본인이 가장 상위에 존재하기 때문에 자기 자신만 해당되고 this는 new를 이용하거나 this를 변경해주는 call, apply, bind와 같은 메서드들을 사용하지 않으면 일반적으로 window를 지칭합니다.

 

calc 함수 실행 문맥에서 argument object는 파라미터 값으로 paramPrice가 존재하고 내부 변수에 calcPrice와 sum이 존재합니다.

 

scope chain은 자기 자신과 calc를 정의한 전역 실행 문맥이 모두 포함되고 this는 this가 변경되는 아무런 행동도 하지 않았기 때문에 window를 지칭하게 됩니다.

 

 

실행 문맥 생성과정

 

실행 문맥 생성과정은 2가지로 나눌 수 있습니다.

 

• Creation Phase
• Execution Phase

 

실행 문맥은 가장 먼저 Creation Phase과정을 거칩니다.

 

Creation Phase에서는 위에서 언급한 3가지 속성값들이 생성됩니다.

 

다만 변수값 같은 경우는 변수가 생성이 되기는 하지만 값이 할당되지는 않습니다.

 

 

그다음 과정은 Execution Phase입니다.

 

여기서는 생성된 실행 문맥이 stack에 담기며 실행되고 변수에 값들이 할당이 됩니다.

 

그리고 모든 실행이 끝마쳐진 실행 문맥들은 클로저를 제외하고는 stack에서 빠져나오게 됩니다.

 

 

해당 과정에 대한 이해가 된다면 호이스팅의 원리에 대해서도 이해가 함께 될 것이라고 생각합니다. (변수는 생성되었지만 값이 할당되지 않아서 에러가 나오는.. 중얼중얼..)

 

그리고 클로저의 단점도 알게 되는 부분이라고 생각합니다. (함수가 종료되었지만 클로저는 메모리에 남아있어 메모리를 계속 차지하게 된다는.. 중얼중얼..)

 

 

참조

 

(JavaScript) 실행 컨텍스트 - 클로저와 호이스팅

 

[ES6] Javascript Execution Context(실행문맥, 실행컨텍스트)

 

 

 

 

 

이상으로 실행 문맥에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.