[Javascript] 실행컨텍스트에 대해 알아보자

WHY?

자바스크립트를 공부하다 보면 여러 개념에 대해서 배우게 된다.

호이스팅, this 등의 개념을 배우게 되는데 해당 개념들에 대해서 왜 이렇게 동작을 할까? 라는 생각이 든다.

이러한 생각을 정리 해주는 것이 실행컨텍스트에 대한 개념을 공부하면서 해결해 보도록하자.

실행컨텍스트란?

실행컨텍스트는 실행할 코드의 정보들을 모아놓은 객체이다. 

실행컨텍스트는 스택의 구조로 이루어져 있다. 그리고 실행할 코드의 정보들을 모아 놓았기 때문에 스택에 쌓이는 데이터는 함수를 호출하는 시점부터 쌓이게 된다.

예제

var a = 1;
function outer() {
	function inner() {
    	console.log(a); // undefiend
        var a = 2;
    }
    inner();
    console.log(a); // 1
}
outer();
console.log(a); // 1

실행 원리

실행컨텍스트 예제 실행 원리

1. 처음 코드가 실행 되자마자 전역컨텍스트에 정보가 담긴다.
2. outer 함수가 실행 되면서 outer 함수에 대한 정보가 insert 된다.
3. 마지막으로 inner가 실행되면서 inner 함수가 inser 된다.
4. inner함수의 실행이 끝나고 나면 pop 된다.
5. outer 함수의 실행이 끝나면 pop 된다.
6. 모든 함수가 실행이 완료 되면 전역컨텍스트가 pop 된다.

컨텍스트 구성요소

Lexical Environment

컨텍스트 환경 정보들을 구성하는 요소를 의미한다. 선언 시점에 환경정보들이 구성된다.

Lexical Environment에는 Environment Record와 OuterEnvironmentReference가 존재한다.

 

EnvironmentRecord

EnvironmentRecord 줄여서 ER에는 현재 컨텍스트와 관련 된 식별자의 정보들이 저장된다.

매개변수, 변수, 함수가 이에 해당된다.

위에서 말했던 것처럼 함수가 호출 되는 시점에 실행컨텍스트가 구성이 되고 ER도 같이 구성된다. 이로인해 실행컨텍스트에는 매개변수, 변수, 함수의 정보를 가지고 있게 된다. 즉 식별자의 정보를 미리 가지고 있는 것처럼 보이게 되는데 이에 대한 개념이 바로 호이스팅 이다(호이스팅은 다음에알아 보도록하자)

 

OuterEnvironmentReference

OuterEnvironmentReference 줄여서 OER의 경우에는 함수가 선언 될 당시의 LE를 참조한다.

그렇다면 선언 될 당시의 LE란 무엇일까?

var a = 1;
function outer() {
	function inner() {
    	console.log(a); // undefiend
        var a = 2;
    }
    inner();
    console.log(a); // 1
}
outer();
console.log(a); // 1

위에 있던 예제를 그대로 들고 왔다.

여기서 선언이란 단어에 주의를 해야한다.즉, 다시 해석하면 선언 될 당시에 현재 컨텍스트를 참조한다.

inner함수를 예로 들어보면 inner함수가 선언될 때 당시의 컨텍스트는  outer가 된다.(inner가 실행컨텍스트에 insert 될 시점에 가장 top에 있는 정보가 LE 가된다)

OER은 자신보다 상위의 컨텍스트를 LE로 지정하게 됨으로서 만약 해당 함수내에서 찾는 변수가 없을 경우 OER을 통해 상위의 LE를 참조하게 된다. 이런식으로 현재 함수내에서 없는 정보가 발생 할 경우 OER을 통해 상위의 컨텍스트에 접근이 가능하게 되고 상위의 컨텍스트에서 계속해서 식별자를 찾게 되는데 이를 스코프체인이 형성 된다고 한다.  스코프체인이 형성 되면서 가장 먼저 발견 된 식별자의 정보를 사용한다.

Reference

- 코어 자바스크립트 

- https://poiemaweb.com/js-execution-context