VE vs LE에 대하여...

<회고록>

오늘은 신범님과 나영님이 스코프에 대해서 설명해 주었다.

그래서 스코프에 대한 블로그를 보면서 나는 스코프를 알기 위해서는 VE와 LE를 알야야 겠다고 생각이 들었다.

그래서 나는 왜 이런 생각이 들었는지의 배경과 실제로 어떤 관련이 있는지에 대해서 살펴보려고 한다.

 

1. VE와 LE 그래서 도대체 뭔대???!

VE,LE는 실행컨텍스트에 담기는 내용들이다. 여기서 실행컨택스트가 머지? 라는 궁금중이 들 수 있다.

실행 컨텍스트는 코드의 실행과 관련된 정보들이 들어있는 객체다. 그리고 이 객체에는 VE,LE,this binding이 들어있다.

이때 VE는 레코드, outer로 이루어져있다. 여기서 레코드는 실행에 필요한 변수들의 식별자가 들어있다.

그리고 outer의 경우에는 outerLE의 줄임말로 콜스택에서 상위 컨텍스트의 LE를 담게 된다.

그럼 여기서 드는 궁금중은 LE가 도대체 무엇이냐? 라는 것이다.

LE는 VE의 복사본으로 VE와의 다른점은 실시간으로 안에 들어있는 정보들이 바뀐다는 점이다.

그럼 이것이 왜 스코프와 연결되는 것일까?

2. 그래서 스코프 왜 연관되어있지??

스코프라는 것은 식별자의 유효범위이다. 즉 어떤 A라는 식별자가 있으면 그 A라는 식별자를 사용할 수 있는 범위를 뜻한다.

자바스크립트엔진은 코드를 어디서 실행시켰는지가 중요한 것이 아니라 어디서 정의했는지를 통해서 스코프를 생성한다.

그리고 이런 구조를 렉시컬 스코프라고 한다. 그럼 여기서 드는 궁금중이 이 스코프가 어떻게  결정되는 것이냐 이다. 

이 질문에 답이 바로 outerLE이다. 즉 콜스택에 들어있는 스택 덩어리들은 VE와 LE를 가지고 있으며 이때 VE안에는 식별자 정보(=

record), outer가 들어있다. 즉 우리가 실행하는 코드는 이 두가지 객체를 참고해서 실행이 되는 것이다.

말로만 설명하면 잘 와닿지 않으니 실제 예시를 가지고 설명하겠다.

var a = 3;

function inner() {
  console.log(a);
}

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

위 코드를 보면 런타임 이전에 콜스택에는 다음과 같이 쌓인다. 전역 컨텍스트 -> outer()컨택스트 -> inner()컨택스트

위 코드를 실행시키면 3,1을 출력하는 것을 확인할 수 있다. 그 이유가 바로 스코프, 즉 outer와 관련이 있다.

즉 차근차근 설명을 해보자면 전역 컨텍스트에는 var a라는 레코드가 들어가게 된다.

그리고 outer()컨텍스트에는 var a = 1라는 레코드, 전역컨텍스트의 내용라는 outerLE가 들어가게 된다.

그리고 inner()컨텍스트에는 outer()컨텍스트의 내용이 들어가게 된다.

이때 코드를 실행시키면 먼저 inner()라는 덩어리에서는 outerLE로 이 코드가 선언된 위치로 부터 더 높은 부모 컨텍스트의 LE정보가 들어간다.

그래서 위 코드의 결과가 3,1이다.

그럼 여기서 퀴즈를 내겠다.

var a = 3;

function outer() {
  var a = 1;

  function inner() {
    console.log(a);
  }

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

위 코드의 결과는 어떻게 될까? 맞추는 분들에겐 제가 칭찬을 드리겠습니다!!