Section2 : Execution contexts and Lexical Environments

Execution contexts

---

 - Javascript가 실행될 때 실행 단위 ( global code, function code, eval code ) , 말 그대로 하나의 실행 단위
 - Execution context stack에 이 단위가 하나씩 쌓이게 된다. 프로그램이 처음 실행될 때 global code가 stack에 쌓이고 그 다음부터 context(function code, eval code)가 쌓인다. 일반적인 stack과 같이 return이 되는 순간 context도 사라진다. 

Scope

---

 Function level scope

 var로 선언된 변수나, 함수 선언식으로 만들어진 함수는 함수 레벨 스코프를 가진다. 즉 함수 내부 전체에서 유효한 식별자가 된다.

 Block level scope

 ES6부터 let, count로 선언된 변수는 함수 레벨 스코프를 가진다.

 ES6이 표준화 되면서 위의 두가지 스코프를 모두 지원하게 되었다. 요즘은 var보다는 let,count를 사용함으로써 스코프 때문에 혼란을 가지지 않도록 코딩하는게 대세라고 한다.

 Lexical scope

 Lexical scope를 얘기할 때 보통 Dynamic scope와 많이 비교된다. 

 Lexical scope는 소스코드가 작성된 그 문맥에서 결정된다. 내가 알고 있는 규칙이고 보통 모든 언어들이 해당 스코프를 가진다. 

 Dynamic Scope는 프로그램의 런타임 도중 컨텍스트에 의해 결정된다. 밑에 예제를 보면 global인 x를 볼 것 같은데 bar()를 호출한 foo()에 있는 x를 사용한다.

 

Global Object

---

 ( app.js는 빈 파일 )

 

chrome console 창의 화면이다. this를 통해 global object를 확인할 수 있다. 그리고 javascript engine에서 생성해주는 window 객체 또한 확인할 수 있다.

이 두가지(window, this) object는 누가 언제 생성해주는 걸까?

 File(app.js)를 가져오는 동안 Javascript engine이 execution context에 생성을 해준다. 밑의 예제를 통해 생성과정을 살펴보자.

 다음의 예제의 console창에는 무엇이 나올까? 내가 항상 해오던 java였다면 compile error가 나서 실행이 되지 않을 것이다.

하지만 다음과 같은 결과를 확인할 수 있다.

선언부 보다 앞에 있는 함수호출이 가능하고, 선언하지 않은 변수는 에러가 나지 않았다.
 javascript engine이 syntax parsing 과정에서 선언부는 위로 올려준 것일까? 라는 추측을 해볼 수 있다. 하지만 a가 undefined( 메모리에는 있으나 값이 할당되지 않음, 밑에서 더 자세히 설명 ) 인 것을 보면 단순히 선언부를 위로 올려준 것은 아닌것 같다. 그렇다면 execution context에 함수와 변수는 어떻게 할당되는 것인가?

 Execution Context 생성 : creating and hoisting

---

 1) Creation Phase : 변수와 함수를 메모리에 할당해주는 단계

 이를 통해 위의 console을 다시 분석해보자. 선언되지 않은 b()와 a가 호출되었던 이유는 실행 전 creation phase에서 메모리에 할당되었기 때문이다. 함수는 선언부와 내용을 모두 메모리에 담지만, 변수는 값을 할당하지 않은채 placeholder만 생성하였기 때문에 undefined가 출력되었다. 

undefined

 자바스크립트에서 사용하는 특별한 keyword이다. 해당 keyword의 의미는 memory에 변수가 할당되었지만 값이 할당되지 않은 경우이다.

 - 선언하지 않은 것 vs undefined =
   Uncaught ReferenceError - a is not defined ( 메모리에 할당되지 않음 ) vs 메모리에는 할당되었으나 값이 정의되지 않음

 - 3번째 줄을 보면 undefined가 keyword로 사용되는 것을 확인할 수 있다.

2) Execution Phase : 말그대로 실헝 단계

 위의 console.log() 등 실행 되는 단계를 얘기함.

Single Threaded and Synchronous execution

---

 - 자세히 다루지는 않을 것이다. 자바스크립트의 동작 특징은 시간당 하나의 command가 실행되는 single threaded와 function이 호출되면 synchronous 즉 순서대로 호출되는 것이다.

Function Invocation and Execution context

---

 - 함수가 호출되면 ( ex : b() ), 함수가 사용할 execution context가 생성된다. ( 위에서 global context 처럼 ) 이 execution context는 호출한 execution context 위에 생성된다. 

Scope chain

---

 - console에는 뭐가 찍힐까? 자바였으면 당연히 compile error를 낼것이고, b의 execution context가 a 위에 생성되었으니 1이 출력될까?

 아니다. execution context는 stack처럼 차곡차곡 쌓이지만 b()의 execution context에 myVar라는 변수가 없는 경우 global context 쪽에 가서 확인을 한다. 이걸 outer environment라고 한다. b와 a의 execution context는 서로 상관이 없다.