[JS] 실행 컨텍스트, Lexical Environment & 호이스팅

해당 블로깅은 인프런의 강의를 들으며 공부한 내용을 정리한 글입니다.
ES5 기준 핵심 내용을 공부하면서 작성하는 블로깅

Context란 무엇일까?

사전적으로는 맥락 또는 문맥이라고 나와있다.
자바스크립트에서 실행 컨텍스트란 무엇일까?
아마도 코드 흐름 또는 코드 맥락,문맥을 뜻하는것 같다.
동일한 조건 또는 환경을 지니는 코드 집단이라고 볼 수 있다.

이게 무슨말인가? ES5 기준으로 함수를 보면 이해할 수 있다.
코드를 보면서 확인해보자

var a = 1;

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

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

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

위의 코드를 보고 콘솔이 찍히는 순서를 확인해보자.

var a = 1;

function outer() {
  console.log(a); // 첫번 째

  function inner() {
  	console.log(a); // 두번 째
  	var a = 3;
  }

  inner();
  console.log(a); // 세번 째
}
outer();
console.log(a); // 네번 째

1. 첫번째로 전역 컨텍스트가 실행이 되면서 var a변수와 function outer함수를 수집(선언)한다.
   이것을 호이스팅이라고도 한다. 호이스팅은 우리가 이해를 돕기위한 추상적인 개념이다. 호이스팅은 현재 컨텍스트의 Lexical Environment에 정보가 담기는(수집되는) 것이다.

2. 그 다음 전역 컨텍스트에서 a에 1이라는 값이 할당 된다.

3. 그리고 outer를 호출하면서 outer 컨텍스트가 실행된다.

4. outer 컨텍스트에서는 function inner함수를 수집(선언)하고, 첫번째줄 부터 실행을 하여 console.log(a);를 출력한다. 여기서 자바스크립트는 생각을 한다. 현재 outer 컨텍스트의 Lexical Environment에 a라는 변수가 수집이 되었는가?
   수집이 되어있지 않다. 그럼 outerEnvironmentReference즉 현재 컨텍스트 보다 외부의 Lexical Environment를 찾아간다.
   outer 컨텍스트의 외부는 전역 컨텍스트이다. 여기로 올라가 a라는 변수를 찾고 그 값을 찾느다. 전역에는 선언되 할당이 되어있음으로 그제서야 console은 1이라는 값을 찍어준다.

5. 그런 다음 inner()를 실행하고 inner 컨텍스트가 실행이 되는것이다.

6. 그러면 inner 컨텍스트에서는 또 다시 수집(호이스팅)이 발생하고, var a를 수집한다.

7. 그 다음 inner 컨텍스트의 첫번 째 코드인 console.log(a)를 출력하는데, 현재 inner 컨텍스트의 Lexical Environment에서 a라는 변수를 찾는다.
   그리고 여기서 6번에서 수집한 var a를 찾았고 그 값을 출력하지만 아직 수집만 되어있고 값이 할당이 안되어있어 2번째 console은 undefined를 출력한다.

8. 그 다음 inner 컨텍스트의 두번째 코드인 a변수에 3을 할당한다. 이 할당은 inner Lexical Environment에서 수집된 a에게 할당되는 것이다. 전역에 있는 a는 무시가 된다.
   즉, 전역 a는 1이고 현재 inner의 a는 3이 된다.
   그렇게 inner 컨텍스트 끝이난다.

9. 그리고 outer 컨텍스트로 돌아와 마지막 console을 실행한다. 이 때는 4번과 같이 a를 전역 컨텍스트(Lexical Environment)에서 찾아 1을 출력하고 outer 컨텍스트는 끝이 난다.

10. 마지막으로 전역 컨텍스트의 마지막 console이 실행되고 여기서 a는 현재 자기의 Lexical Environment에 수집된 a를 읽어 출력하여 1이 출력된다.
    그래서 출력의 결과는 1, undefined, 1, 1이라는 결과가 출력 된다.

• ES6문법에서는 inner()를 실행할 때 초기화를 하라는 에러를 발생시킨다.

호이스팅은 지금까지 단순 함수를 끌어올린다라고 생각했지만, 실행 컨텍스트(흐름)을 보며 확인하니 원리를 보다 더 파악할 수 있었다.