Written by JJoo
on 

실행 컨텍스트(Execution Context)

Execution Context 란?

Execution : 실행

Context : 문맥/맥락/환경

어떤 코드를 봤을 때 그 코드가 어떤 역할을 수행하는 지를 알기 위해서는 그 코드에 영향을 주는 주변 코드나 변수들을 파악해야 한다. 그렇게 영향을 주는 환경들을 Context라고 한다.

Execution Context = 코드를 실행하는 데에 필요한 배경이 되는 조건이나 환경이라는 뜻이다.

즉, 동일한 조건/환경을 지니는 코드 뭉치를 실행할 때 필요한 조건이나 환경 정보를 말한다.

자바스크립트에서 동일한 조건/환경을 지니는 코드 뭉치는 4가지가 있다.

eval은 여러 문제를 야기하는 위험한 명령어라 빼고, 자바스크립트 코드가 실행되는 순간에 바로 전역 컨텍스트가 실행이 되고 전체 코드가 끝날 때 전역 컨텍스트가 종료된다. 그것을 전역 공간이라고 할 수 있다.

모듈도 어딘가에서 import 되는 순간에 모듈 내부에 있는 컨텍스트가 생성이 되고 그 모듈 코드가 전부 끝났을 때 컨텍스트가 종료가 된다. 그 구간을 하나의 함수 공간이라 할 수 있다.

함수도 함수가 실행되고 끝나는 그 구간을 하나의 환경/조건이라고 할 수 있다.

즉, 자바스크립트는 오직 함수에 의해서만 컨텍스트를 구분할 수 있다는 이야기가 되고,

정리하면 Execution Context = 함수를 실행할 때 필요한 환경정보를 담은 객체이다.

참고: if / for / switch / while 등의 반복 혹은 조건문은 ES6에 추가된 Block Scope라는 개념으로 본다. 이들은 별개의 실행 컨텍스트를 실행하지 않는 다.

var a = 'window';

function outer(){
    console.log(a);

    function inner(){
        console.log(a);
        var a = 'inner';
    }

    inner();
}

outer();
console.log(a);

위 코드의 실행 순서

위 코드의 실행 순서

  1. var a = 'window'; 부터 마지막 줄 까지 전역 컨텍스트 시작해서 코드 읽기를 시작
  2. outer()에서 함수가 실행되면서 outer()의 실행 컨텍스트 시작
  3. outer()의 실행 컨텍스트에서 inner()가 실행되면서 inner의 실행 컨텍스트 시작
  4. inner()가 끝나고 inner()의 컨텍스트 종료
  5. outer()가 끝나고 outer()의 컨텍스트 종료
  6. 전역 컨텍스트 종료

이렇게 제일 늦게 들어온 컨텍스트가 먼저 빠지고 제일 먼저 들어온 컨텍스트가 제일 마지막에 빠지는 개념을 ‘스택’이라고 한다.

코드 실행에 관여하는 스택을 ‘콜스택’이라고 한다.

Call Stack : 현재 어떤 함수가 동작중인지, 다음에 어떤 함수가 호출될 예정인지 등을 제어하는 자료구조

콜스택에서 실행 컨텍스트가 동작하는 순서

실행 컨텍스트의 내부

실행 컨텍스트에는 세 가지 환경 정보들이 담긴다.

VariableEnvironment와 LexicalEnvironment에는 현재 환경과 관련된 식별자 정보가 담긴다.

이 두가지는 값의 변화가 실시간으로 반영이 되냐, 안되냐의 차이만 있다.

VariableEnvironment LexicalEnvironment
식별자 정보 수집 식별자 정보 수집
변화 반영 X 변화 실시간 반영 O

Lexical Environment란?

Lexical : 어휘적/사전적

Environment : 환경

Lexical Environment란 어떤 실행 컨텍스트에 대한 환경 정보가 담겨져 있는 사전으로 즉, 실행 컨텍스트를 구성하는 환경 정보들을 모아 사전처럼 구성한 객체다.

실행 컨텍스트 A 환경 사전 내부 식별자 a : 현재 값은 null이다. 내부 식별자 b : 현재 값은 10이다. 외부 정보 : C를 참조한다.

Lexical Environment를 구성하는 하위 정보에는 두가지가 있다.

environmentRecord 란?

현재 문맥의 식별자 정보. 실행 컨텍스트가 최초 실행될 때 제일 먼저 하는 일이다.

현재 컨텍스트의 식별자 정보들을 수집해서 environmentRecord에 담는 과정이 호이스팅(Hoisting)이다.

호이스팅은 실제 하는 현상이 아니고 environmentRecord의 정보 수집 과정 좀 더 쉽게 이해하기 위해서 만든 허구의 개념이다.

호이스팅(Hoisting)이란

outerEnvironmentReference 란?

외부 환경(Lexical Environment)에 대한 참조이다. 즉, 현재 문맥에 관련 있는 외부에 있는 컨텍스트 식별자 정보를 참조하는 것이다.

var a = 'window';

function outer(){
    console.log(a);

    function inner(){
        console.log(a);
        var a = 'inner';
    }

    inner();
}

outer();
console.log(a);

위 코드의 Lexical Environment 구조를 보자

이 구조에서 outerEnvironmentReference는 엮이고 엮이는 구조로 이것을 Scope Chain이라고 한다.

스코프 체인 현상은 outerEnvironmentReference에 의해서 만들어지는 것이다.

스코프 체인(Scope Chain)이란?

정리

Execution Context 는?

Reference

Discussion and feedback