실행 콘텍스트(Execution Context)

javascript에 대해 공부할때, 굉장히 중요하게 다루는 개념 중 하나가 실행콘텍스트이다.
이것은 전역변수와 지역변수, this, scope 등등 자바스크립트의 코드가 실행되는 순간의 환경을 말한다.
자바스크립트 엔진은 코드 실행시 필요한 각종 정보를 담을 객체를 생성하는데, 이것이 활성 객체이다.
이 활성객체에는 argument, 스코프 정보, 지역변수, this바인딩 등의 환경을 따져 값이 셋팅되어있고, 자바스크립트 코드가 실행될 때 활성객체 내 값을 보고 실행시킨다.

한데 이런 내용은 사실 어느 언어에서나 그게 그거 아닌가? 하는 생각이 든다.
활성객체를 만들어 세팅한다는 부분을 제외하고(다른 언어들의 경우 런타임 환경을 어떻게 구성하는 지 모르겠지만,,,), 사용자 관점에서 보자면, 다른 언어들을 봐도 해당 블록 내에서 변수를 찾고 없으면 상위 블록에서 찾고, override 된 값이 있다면 부모보다 자식의 값이 우선순위를 갖는다.
실행콘텍스트의 개념은 프로그래밍 언어에 익숙하다면 당연한 이야기의 연속처럼 보인다.
그래서 자바스크립트에 특화된 내용만 담아보려 한다.
클로저와 호이스팅이 그것이다.

클로저

클로저란 내부 private 변수를 사용할 수 있는 환경에 있는 함수이다. 즉, 어떤 변수값을 은닉화, 캡슐화 하기 위해 사용하는 기술이다.

var counter = () => {  
    var _cnt = 0;
    return {
        increment: () => {
            _cnt += 1;
        },
        decrement: () => {
            _cnt -= 1;
        },
        getValue: () => {
          return _cnt;
        }
    }
}
var obj = counter();

위 코드를 보면 외부에서 _cnt의 값을 변경할 방법이 없다는 것을 알 것이다. 또한 counter function이 할당된 obj는 할당 된 순간의 _cnt의 값(0)을 기억하게 된다.

호이스팅

호이스팅은 변수를 선언했을 때, 선언부가 스코프 맨 위로 끌어올려지는 것을 개념적으로 표현하는 말이다.

console.log(data); // undefined
func(); // hello world
function func() {
    console.log('hello world');
}
var data = 10;

이를 풀어보면 아래와 같다.

function func() {
    console.log('hello world');
}
var data;
console.log(data); // 에러가 아닌 undefined
func(); // hello world
data = 10;

var의 경우 함수스코프로 함수 최상단으로 끌어올려지며, let과 const의 경우 블록스코프로 해당 블록 내 최상단으로 올라간다.