실행 콘텍스트

holang-i·2021년 8월 5일

Javascript 핵심 개념 알아보기 - JS Flow 를 공부하며 정리합니다.

ES6 이전까지의 자바스크립트의 전반적인 흐름을 공부합니다.

Execution Context

실행 콘텍스트란?
실행에 필요한 코드 흐름상의 배경이 되는 조건/환경을 나타낸다.

ES5 환경에서는 동일한 조건/환경을 지니는 경우가 함수 or 전역 공간이다.

전역 공간은 자바스크립트 파일을 실행하는 순간에 전역 콘텍스트가 열리고,
함수를 실행할 때 아니면 같은 전역 공간안에서는 같은 환경안에 있다고 볼 수 있다.

자바스크립트에서의 실행 콘텍스트를 정리하면

함수를 실행할 때 필요한 환경정보(조건)

위의 1번들을 담은 객체

아래의 코드를 보면서 console.log가 찍히는 순서를 예측해 볼 것이다.

var a = 1;

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

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

  inner();
  console.log(a); // (3)
}

outer();
console.log(a); // (4)
전역 콘텍스트가 열린다.

전역 공간을 한 줄씩 실행하다가 outer( )함수를 만났을 때 outer라고하는 함수의 실행 콘텍스트가 열리면서 (1)번이 실행된다.

inner()를 만나면 inner 함수의 실행 콘텍스트가 열리면서 (2)번이 실행된다.

그 다음에 inner에 대한 실행이 끝났으니까 (3)이 실행된다.

그 다음에는 outer에 대한 실행이 끝났으니까 (4)가 실행된다.

위의 1~5번에 대한 실행이 어떻게 일어나고 처리될까?

우선 가장 안 쪽, 마지막에 들어온 것이 가장 먼쩌 빠지는 개념인 stack에 의해서 일어난다.
실행에 대한 것을 관여하는 스택을 콜 스택(call stack)이라고 부르는데 이 콜스택에 의해 위와 같은 일이 이루어진다.

call stack: 현재 어떤 함수가 동작하고 있는지?, 그 다음에는 어떤 함수가 호출되어야 하는지 등을 제어하는 자료 구조

Execution Context의 구조

우선 위의 코드에서 inner안을 살펴보면
VariableEvrironment와 LexcialEnvironment로 이루어져 있다.

Variable Environment

초기 생성, 처음에 접한 정보에 대한 스냅샷만 뜨고 뒤에 값이 바뀌어도 바뀐값이 적용되지 않고, 처음 값만 유지가 된다.

Lexical Environment

이후에 값이 계속 바뀔 때 마다 바뀌는 값을 반영한다.

Lexical Environment

Lexical Environment에는 environmentRecord와 outerEnvironmentReference가 들어 있다.
이 두가지에 대해 알아볼 것이다.

environmentRecord

environmentRecord는 현재 콘텍스트의 식별자를 수집해서 담는 것을 말한다.
이를 다른 말로는 Hoisting이라고 말한다.

Hoisting

식별자 정보를 실행 콘텍스트의 맨 위로 끌어 올린다.

아래의 코드를 보고 식별자가 무엇이 있고, 호이스팅이 어떻게 이루어지는 지 알아볼 것이다.
console.log(a());
console.log(b());
console.log(c());

function a() {
  return 'a';
}

var b = function bb() {
  return 'bb';
}

var c = function() {
  return 'c';
}
우선 위 코드에 식별자로는 a, b, c가 있기 때문에 이를 위로 끌어올린다.
함수 선언문의 경우 함수 전체를 끌어올리는 것을 명시해야된다.
function a() {
  return 'a';
}

console.log(a());
console.log(b());
console.log(c());

var b = function bb() {
  return 'bb';
}

var c = function() {
  return 'c';
}
그리고 b, c에 대한 호이스팅을 끝내면 아래와 같이 된다.
function a() {
  return 'a';
}

var b;
var c;

console.log(a());
console.log(b());
console.log(c());

b = function bb() {
  return 'bb';
}

c = function() {
  return 'c';
}
environmentRecord에는
{
  function a() {...},
  b, 
  c
}
위와 같은 모양으로 정보를 수집하게 된다.
현재 전역 콘텍스트에 선언되어진 식별자들이 무엇이 있는 지? 찾고, 순차적으로 정보를 수집하다보니 호이스팅한 것과 똑같은 개념이 된다고 한다.

outerEnvironmentReference

외부의 환경에 대한 참조, 현재 실행 콘텍스트에 관련되어 있는 외부 실행 콘텍스트에 있는 식별자 정보를 수집한 것을 의미한다.

SCOPE

: 변수의 유효 범위
변수의 유효범위는 execution context가 만들어 낸다. 즉, 실행 콘텍스트가 수집해놓은 정보에만 접근할 수 있고, 그 변수는 실행 콘텍스트 내부에서만 존재하게 된다.

inner에서는 outer, 전역에 있는 변수에 접근할 수 있다.
하지만 outer나 전역에서는 참조하고 있는 대상이 없기 때문에 inner에서 선언한 변수에 접근할 수 없다.

LexicalEnvironment에서 수집해 놓은 정보가 없기 때문에 inner에서 쓰는 변수에 접근을 못한다.

즉, 변수의 유효범위라는 것은 실행 콘텍스트에 의해서 만들어지는데 스코프 체인이라는 것도 결국에는 실행 콘텍스트에 의해서 결정된다.