Javascript Visualized: Event Loop, Hoisting, Scope Chain

■ Event Loop

setTimeout(() => { ... }, 1000)은 Web API 쓰레드에서 1000ms 타이머 실행이 끝난 후에 바로 실행되는 게 아니다.
1000ms 후에 단순히 setTimeout의 콜백 함수가 task queue에 추가되는 것 뿐이다.
task queue는 대기열이므로 해당 콜백 함수는 대기열이 끝나고 자신의 차례가 될 때까지 기다려야한다.
call stack이 비어있으면 task queue에 있던 콜백 함수들이 하나씩 event loop에 의해 call stack으로 이동한다.

✨♻️ JavaScript Visualized: Event Loop

 

■ Hoisting

JS 엔진이 처음 script를 평가할 때 가장 먼저 하는 일은 코드 상의 데이터들의 공간을 메모리에 할당하는 것.

아직 이 시점에는 아무런 코드도 실행되지 않는다. 단지 실행을 준비하는 단계.

함수 선언문과 변수가 저장되는 방식은 다르다. (함수 표현식은 변수에 포함)

함수 선언문은 함수 전체에 대한 참조를 저장.

var 변수는 undefined, let과 const는 uninitialized 상태로 저장.

 

함수 호출이 함수 선언문보다 앞에 위치하더라도 아무 문제 없이 해당 함수를 호출할 수 있다.

함수 선언문은 평가 단계에서 이미 함수 전체에 대한 참조를 저장했기 때문.

반면, var 변수는 선언 전에 참조하면 undefined를, let과 const는 reference error를 발생시킨다.

 

undefined와 uninitialized를 구분했던 것도 둘의 동작이 다르기 때문.

let과 const 변수가 선언되고, 초기화 되기 이전까지의 영역을 'Temporal Dead Zone(TDZ)'이라고 한다.

이 영역에서 let과 const 변수의 값을 참조하면 reference error가 발생한다.

var 변수와 다르게, 의도치 않게 undefined를 참조하는 것을 방지하기 위해 만들어진 영역.

ES6 class 또한 TDZ를 가진다.

 

코드 실행 단계에서 변수 초기화 부분을 거치고나면,

이전에 default 값(undefined, uninitialized)으로 할당되어있던 것들이 전부 초기화된 값으로 덮어쓰여진다.

🔥🕺🏼 JavaScript Visualized: Hoisting

 

■ Scope Chain

현재 컨텍스트에서 접근할 수 있는 값에 대한 참조의 체인.
(chain of references to values that we can access in the current context)

스코프 체인은 실행 컨텍스트에 포함되어있고, 실행 컨텍스트가 생성될 때 함께 만들어진다.

실행 컨텍스트는 런타임에 전역 컨텍스트로, 혹은 함수가 호출될 때 생성되므로 스코프 체인도 마찬가지. (런타임)

 

특정 함수의 로컬 컨텍스트에서 원하는 식별자에 대한 참조를 가지고 있지 않다면,

스코프 체인을 타고 외부 컨텍스트로 가서 해당 식별자에 대한 참조를 찾는다.

스코프 체인을 타고 외부 컨텍스트로 갈 순 있지만, 내부 컨텍스트로 갈 순 없다.

 

전역 스코프, 로컬 스코프(함수 기준) 외에 let과 const의 경우 블록 스코프도 있다. (가장 가까운 대괄호를 기준)

⚡️⛓JavaScript Visualized: Scope (Chain)