[Javascript] 실행 컨텍스트

 

실행 컨텍스트를 알아보자!

실행 컨텍스트를 위해 책을 읽던 나날들... 그러나 텍스트만으로는 쉽게 이해할 수 없었던 나.. 

하지만 이대로 넘어갈 수 없지.. 🤔

이번 기회에 자바스크립트를의 동작 원리를 보다 깊게 이해하기 위해 실행 컨텍스트에 대해 정리해보자!

 

실행 컨텍스트를 알기 위해서는 먼저 콜 스택에 대해서 알아야 한다.

 

 

콜 스택

출처 [https://stackoverflow.com/questions/62725430/what-is-the-different-between-stack-and-call-stack-in-javascript]

우선 스택은 위와 같이 하나하나 차례대로 쌓고 빼고를 반복하는 자료구조다.

콜 스택은 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하여 코드의 실행 순서와 환경을 관리한다.
현재 실행중인 코드의 실행 컨텍스트가 콜 스택의 최상위에 존재한다! 이런 콘텍스트를 실행 중인 실행 컨텍스트 (running execution context)라고 한다.

 

 

그럼 컨텍스트가 뭐길래 콜 스택에 쌓나요.. 🤔

 

실행 컨텍스트

실행 컨텍스트는 실행할 코드에 필요한 환경 정보들을 모아놓은 객체다.
컨텍스트는 크게 3가지의 타입이 있다. 이 타입들은 각각의 실행 컨텍스트를 생성한다.

• 전역 코드 : 전역에 존재하는 소스코드 (전역에 선언된 함수, 클래스는 미포함) 스크립트가 실행될 때 자동으로 부여된다.
• 함수 코드(가장 흔하게 실행 컨텍스트를 구성하는 방법) : 함수가 호출될 때 컨텍스트가 생성되어 콜 스택에 쌓인다. (함수 내부에 중첩된 함수, 클래스는 미포함)
• eval() 코드 : eval 함수에 인수로 전달되어 실행되는 소스코드.
• 모듈 코드 : 모듈 내부에 존재하는 소스코드. (모듈 내부의 함수, 클래스는 미포함)

예시 코드를 통해서 좀 더 구체적으로 실행 컨텍스트가 어떻게 구성되는지 보면 이렇다.

var a = 1;

function outer(){
    function inner(){
        console.log(a); // undefined
        var = 3;
    }

    inner();
    console.log(a);
}
outer();
conosle.log(a);

1. 코드 실행
2. 전역컨텍스트가 콜스택으로 in
3. outer 함수 실행 컨텍스트가 들어오면서 전역 컨텍스트가 중단됨
4. inner 함수 실행 컨텍스트가 들어오고 outer 컨텍스트 중단
5. inner 함수의 내부 진행
6. inner 컨텍스트 끝
7. outer 컨텍스트 재개
8. outer 컨텍스트 끝
9. 전역 컨텍스트 재개
10. 전역컨텍스트 끝
11. 코드 종료

 

 

 

실행 컨텍스트에 담기는 정보

실행 컨텍스트에는 아래와 같이 세 가지의 정보가 담긴다.

 

VariableEnvironment

a. 현재 컨텍스트 내의 식별자 정보 (호이스팅에 사용됨)

b. 외부 환경 정보

c. 선언 시점의 렉시컬 환경 스냅샷

 

LexicalEnvironment

VE의 선언 시점 스냅샷을 복사하여 생성! 스냅샷이 유지되지 않고 변경사항이 실시간으로 반영된다.

 

this binding

this 식별자가 바라봐야 할 객체가 들어있다.

 

 

VE와 LE의 구성요소

둘 다 동일하게 environmentRecord (줄여서 record) outerEnvironment (줄여서 outer)로 구성되어 있다.

 

environmentRecord(= record)

현재 컨텍스트와 관련된 식별자 정보들을 수집한다.

• 함수에 식별된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자 등등
• 컨텍스트 내부를 처음-> 끝 순서대로 훑어서 수집한다.
• 이렇게 수집된 정보들은 호이스팅에 사용된다.
  변수의 호이스팅과 관련해서는 아래 포스팅에도 정리했다.
  https://i-ten.tistory.com/149

 

함수의 호이스팅 관련해서는 함수 표현식은 변수 부분이, 함수 선언문은 그 자체로 호이스팅 된다는 특징이 있다!

 

 

outerEnvironment(= outer)

outer는 선언될 당시의 렉시컬 환경을 참조해서 스코프 체인이 가능토록 한다.

 

스코프 체인?

스코프 체인은 식별자의 유효 범위를 안에서부터 바깥으로 검색해나가는 것!..

var a = 1;
var outer = function(){
    var inner = function(){
        console.log(a);
        var a = 3;
    };
    inner();
    console.log(a);
};
outer();
console.log(a);

위와 같은 코드가 있다고 할 때, 이 코드의 결과는 아래와 같다.

첫 번째 로그는 왜 undefined인가요?..

inner 함수 안에서 호이스팅에 의해 이렇게 진행되기 때문이다.

변수 a는 선언되기만 하고 값 할당을 아직 받지 못했기 때문에 undefined가 나온다.

하지만 a의 값은 inner 함수 스코프 안에서 찾은 상태.

 

그럼 두 번째와 세 번째 콘솔은 왜 1인가요.. 한다면 inner 함수의 호출이 끝난 상태이기 때문에 콜 스택에는 이렇게 남는다.

outer 함수 내부에 변수 a가 없기 때문에 스코프 체인을 통해 전역 컨텍스트의 렉시컬 환경에서 찾아온 것!

이런 식으로 호출된 스코프 안에서 값을 찾지 못했을 때 바깥 스코프로 거슬러 올라가며 값을 찾는 것이 스코프 체인이다!