Today, I Learned

• 먼저, 오늘은 웹 브라우저에서 자바스크립트 엔진이(크롬의 경우 V8) 어떤 식으로 구성되어있고, 어떻게 실행되는지를 공부했다.
  먼저, 자바스크립트 엔진의 구성요소는 memory heap과 call stack이고, 이 call stack은 동기 방식으로 명령을 처리한다. 자바스크립트는 단일 스레드 프로그래밍 언어로 명령이 들어오면, 그 명령을 끝낼 때까지 다음 명령을 처리할 수 없다. call stack은 그에 맞게 명령을 아래서부터 쌓는 방식인데(FILO), 각각은 stack frame으로 되어있고, 그 스택 프레임 안에 실행 컨텍스트가 들어가 있는 식이다.
• 이 때, 실행 컨텍스트는 '하나의 실행 가능한 블록'으로, 전역코드, eval 메서드를 통해 호출된 명령, 함수가 주가 된다. 그리고 이 실행 컨텍스트는 위의 실행 가능한 블록을 실행 시킴과 동시에 생성되면서, '활성객체 혹은 변수객체'를 생성한다. 이 활성객체는 일종의 메타 데이터로, 실행 컨텍스트에 대한 정보가 들어가 있다. arguments 객체를 참조하는 arguments 프로퍼티, this가 바인딩한 객체 정보, 해당 코드 블록에 있는 변수 및 함수(생성만 할 뿐 초기화하여 저장하진 않는다), 그리고 마지막으로 '스코프 체인'이 있다.
• 스코프 체인은 해당 블록 속의 코드가 실제로 실행이 될 때,(top to bottom으로 읽기 시작할 때) 그 안에서 변수를 가져다 쓰는 경우가 있을 때, 그 변수가 뭐를 담고있는 변수인지를 알기 위해 scope 체인을 통해 체크한다고 생각할 수 있다. 이 때, 스코프 체인은 해당 함수가 생성될 때, 그 함수를 생성한(만약 전역 함수였다면, 이 함수는 전역 실행 컨텍스트의 활성객체에 저장되어있다) 실행 컨텍스트의 활성 객체의 스코프체인(전역 실행 컨텍스트의 경우 자기 자신인, 전역 객체만을 가지고 있음)을 참조하면서 생성이 된다. 즉, 해당 함수의 스코프 프로퍼티는 해당 함수가 생성된 컨텍스트의 스코프 프로퍼티와 동일하다. 이에 더해서, 그 함수가 실제로 실행될 때, 즉, 호출되서 실행될 때 생기는 실행 컨텍스트에서의 스코프 프로퍼티는 해당 함수가 참조하고 있는 스코프 프로퍼티에 + 현재 실행되고 있는 컨텍스트의 활성 객체를 스택처럼 위에 쌓는다. 이렇게 스코프 체인은 linked list와 같이 생성이 되고, 프로토타입 체인처럼 스코프 체인 또한, 변수를 확인하기 위해서 해당 활성 객체의 스코프 프로퍼티의 스코프 체인의 맨 앞(자기 자신이 항상 제일 앞임)부터 체크하기 시작한다. 이 때, 스코프 체인을 하나하나 올라가봐도 해당 변수가 없으면 에러를 리턴한다(referenceError)
• 이 때, eval메서드처럼 쓰는 것을 권장하지는 않지만, 스코프 체인을 임의로 변경할 수 있는 방법이 있는데, 그것은 with()를 쓰는 것이다. with에 매개변수로 특정 객체를 주면, 그 객체가 with 블록 안에서 실행되는 함수의 스코프 체인의 1순위에 위치하게 된다. but, 권장하지 않음!
• 추가적으로 함수 호이스팅도 실행 컨텍스트와 활성 객체의 개념으로 이해해볼 수 있다. 함수 호이스팅의 경우 함수를 선언식으로 생성해놓으면, 활성 객체에 만들어지고 시작하기 때문에(코드를)어디에서든 호출해서 쓸 수 있게 되는 것이고, 표현식으로 만들면, 생성은 되지만, 실제 초기화는 해당 코드 부분까지 가야 진행되기에 전역 변수처럼 쓸 수 없는 것이다.
• 다시 엔진의 구성요소 부분으로 돌아와서, 엔진에는 web API와 이벤트 큐, 루프가 있는데, web API에서는 비동기 방식으로 처리하는 setTimeout, DOM, AJAX 등이 제공된다. 콜 스택에서 web API를 호출하면, web API는 이를 이벤트 큐에 push하고, 이벤트 큐는 콜 스택에 자리가 비는지를 체크하면서, 때가되면 큐 안의 명령을 콜 스택에 푸시한다(이벤트 루프).

Planning to Study

• i=0;
  var i; 는 되고 let은 이렇게 하면 안되는 이유를 스코프, 실행 컨텍스트와 관련해서 이해해보자
• block scope vs function scope 검색해서 공부해보기
• 스코프 개념 urclass로 한번더 복습하고, 클로저, 객체지향 부분 공부로 넘어가기