Published 2022. 7. 7. 00:39

실행 컨텍스트

ES5 기준

실행 컨텍스트란?

코드를 실행하기 위한 정보를 담고있는 객체를 의미한다.

실행 컨텍스트의 종류

Global Execution Context
Function Execution Context

자바스크립트 엔진은 실행 컨텍스트에 코드가 실행되기 전 정보를 수집을 한다.
처음 코드가 실행될 때 Call Stack에 Global Execution Context가 쌓이게 되고 함수를 이용하면
그 위에 (func name) Execution Context가 쌓이게 된다. 이후로 함수가 종료되면 LIFO (Last In First Out) 순서로 pop 된다.

다음으로 실행 컨텍스트의 구성을 살펴보면

1. Lexical Enviroment, Variable Enviroment

변수, 매개변수와 인수정보, 함수 선언문을 다룬다.

var : global scope (예외) 함수 안에서 선언할 경우 local scope에 해당
let, const: 그 외

키워드를 붙이지 않고 변수를 선언하면 global scope에 들어감

Lexical Environment Variable Environment의 차이와 구성

Variable Environment

var로 선언된 변수가 메모리에 매핑되고 초기값으로 undefined가 할당된다. var로 선언한 변수를 위한 Function scope를 단위로 한다..

Lexical Environment

let, const로 선언된 변수가 메모리에 매핑되고 초기값은 할당되지 않는다. 함수 선언이 메모리에 매핑되고 함수 전체가 할당된다. let과 const로 선언한 변수를 위한 Block scope를 단위로 한다.

이 둘은 공통적으로 Enviroment Record 와 Outer Enviroment Reference를 가지고 있음

Enviroment Record
- 환경 레코드는 렉시컬 중첩 구조 기반으로 변수, 함수 식별자와 값을 관리하는 데 사용됨

Outer Enviroment Reference
- 현재 함수가 실행될 당시의 외부 Lexical Environment을 참조함

var num=1

function test(x,y){ //함수 선언문
//x,y 는 매개변수
...
}

test(1,2) //1, 2는 인수

var test=function(){ //함수 표현식
...
}

var x = 'x';
let f = 'f'

function foo () {
  var y = 'y';

  function bar () {
    var z = 'z';
    console.log(x + y + z);
  }
  bar();
}

foo();

//===============Execution Context=====================

globalEnviroment{
    LexicalEnviroment{
      enviromentRecord{
        f:nothing
        foo:<function>
      }
      outer:null
    },

    VariableEnviroment{
      enviromentRecord{
        x:undefined
      }
      outer:null
    }
}

FooEnviroment{
    LexicalEnviroment{
      enviromentRecord{
        bar:<function>
      }
      outer:globalEnviroment
    },

    VariableEnviroment{
      enviromentRecord{
        y:undefined
      }
      outer:globalEnviroment
    }
}

위 코드의 Call Stack 과정이다.

bar 함수도 남아있지만 여기서는 생략하겠다.

global Enviroment의 outer가 null인 이유는 최상위 스코프이기 때문이다.
더 이상 참조할 상위 스코프가 존재하지 않는다.

위의 경우에서는 bar() 함수가 실행될 당시에 x, y 변수가 현재 스코프에 존재하지 않아 bar context의 outer에 있는 상위 스코프를 참조하여 foo에서 탐색하게 된다. 그러나 x도 foo() 함수 스코프 안에 존재하지 않아 foo의 상위 스코프인 Global Scope 에서 찾아내 출력을 하게 된다.

2. Scope Chain

스코프 체인을 알기 전에 Scope 란 변수에 접근할 수 있는 범위, 변수를 찾는 규칙으로 생각할 수 있다.
스코프 체인은 대략적으로 스코프가 연결되어 있음을 의미한다.

var v = "전역 변수";

function a() {
//function a Execution Context(EC)
    var v = "지역 변수";

    function b() {
        //function b Execution Context
        console.log(v);
    }

    b();
}

//Global Execution Context
a();

EC : Excution Context

위의 코드는 Global EC -> a EC -> b EC 순서로 Call Stack에 쌓여있으며 제일 안쪽의 함수인 b에서 변수 v를 출력할 때 Local Scope에 존재하지 않으니 그 위의 a 스코프에서 변수 v를 찾게 된다. 그러므로 코드의 실행 결과는 '지역 변수' 가 될 것이다. 만약 함수 a 의 변수 v를 주석처리 할 경우 그 상위 스코프인 Global Scope에서 찾게 되어 '전역 변수' 가 출력된다.

3. This Binding

~~아직 잘..~~

참고 :
https://ljtaek2.tistory.com/140 (예시코드)
https://meetup.toast.com/posts/129
http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-2-lexical-environments-ecmascript-implementation/

실행 컨텍스트