TIL. 실행 컨텍스트

실행컨텍스트란?

실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악 할 수 있는 개념이다.

우선 자바스크립트는 싱글스레드 언어이다.
자바스크립트 엔진이 코드를 읽어 내려가면서 실행해야할 함수를 발견한다면 컨텍스트 환경을 만든다.
그 안에는 3가지 정보가 저장이 되는데 아래와 같다.
1. VariableEnvironment
2. LexicalEnvironment
3. thisBinding

이 세가지를 설명하기 전 자바스크립트의 동작 방식에 대해서 알아야한다.

CallStack 과 EventQueue 라는 두가지 개념이 존재한다.
다시 자바스크립트 엔진이 코드를 읽어내려가면서 실행해야할 함수를 발견한다면컨텍스트 환경을 만들고 callstack 에 저장한다. 함수안에 변수들은 hoisting 이 되고 차례대로 실행하게 된다. 중첩된 함수가 있다면 callstack 위에 쌓이고 쌓인다. stack 은 들어온 순서가 아닌 제일 마지막에 들어온 순서가 첫번째 차례로 실행이 된다.

EventQueue는 자바스크립트 엔진이 실행해야할 함수들을 저장하는 곳이다.
들어온 순서대로 실행을 하며 자바스크립트 엔진이 CallStack 과 EventQueue를 확인하고 Callstack이 비어있으면 EventQueue에 있는 이벤트함수를 CallStack 에 push 한다.

다시 돌아가 컨텍스트 환경에 저장되는 3가지에 대해서 알아본다.
1. VariableEnvironment : 현재 컨텍스트 내의 식별자들의 대한 정보+ 외부환경 정보 , 선언시점의 LexicalEnvironment으로 변경사항은 저장되지 않는다.

2. LexicalEnvironment : VariableEnvironment이 생성되면서 복사본으로 만들어지고 변경사항이 적용된다.

3. thisBinding : 식별자가 바라봐야하는 대상 객체.

함수선언문과 함수표현식

//1.
function a () {}
a() //실행 ok 함수선언문. 함수명 a가 곧 변수명

//2.
var b = function () {}
b() //실행 ok 익명 함수 표현식. 변수명 b가 곧 함수명

//3.
var c = function d () {}
c() //실행 ok 기명 함수표현식. 변수명은 c, 함수명은 d
d() // ERROR !! 

여기서 주의할 점은 a b c 는 hoisting 대상이지만 d는 아니다.

스코프& 스코프체인

식별자에 대한 유효범위로서 함수 실행시 생성된다.
스코프는 하나의 범위라고 했는데, 함수 바깥에 있는 변수는 안에 있는 함수에서 접근이 가능하나, 함수 안에있는 변수는 함수 바깥에서 접근이 불가능하다.
그래서 변수에 접근할때 우선 해당 스코프내에서 변수를 찾고 없다면 상위 스코프로, 그래도 없다면 그 상위스코프로 검색해 나가는 과정을 스코프체인이라고 한다.