실행 컨텍스트
자바스크립트 코드를 실행하는데 필요한 환경을 제공하는 객체
자바스크립트 엔진이 코드를 평가하고 실행 하는데 필요한 정보를 담고 있는 공간
평가 : 변수 선언하는 단계
실행 : 호이스팅 된 것들을 참조하여 코드가 실행되는 단계
1. 평가 단계는 컴파일 단계 : 레코드 수집 및 상위 스코프 결정
2. 실행 단계는 런타임 단계 : 함수 실행 시 실행 컨텍스트를 콜 스택에 푸쉬하고 변수에 값 할당실행 컨텍스트 3가지 구성요소
VE : 평가 단계에서 호이스팅이 이루어진 공간.
이 단계에 변수가 메모리에 할당됩니다.
LE : 실행 단계에서 사용하는 공간.
VE의 정보를 바탕으로 실행 단계에서 변수를 참조하고, 값을 할당합니다.
-> Record : 선언된 변수, 함수, 클래스 등이 기록되는 공간 식별자와 그 값이 저장된다.
-> Outer : 상위 스코프를 가리키고 있는 공간, 스코프체인을 형성하는 역할을 합니다.글로벌 컨텍스트를 가지고 (아직 아무것도 실행된게 없기 때문에 global이 컨텍스트로 지정됨)
함수 선언문만 레코드에 outerFn:f() 몸통까지 끌려간다
다른 함수 표현식은 outerFn 만 몸통까지 끌려오지 않는다.
outer는 null을 가진다
콜 스택 안에 들어오고 나서야 함수 몸통이 실행된다.
그리고 위는 함수 선언문이였지 함수 실행
outerFn()이 실행 되면서
outerFn()의 레코드에 변수 outerVar 와 innerFn()이 들어간다
아우터는 Global을 가지게 된다.
(메게변수도 레코드에 들어간다 그러나 레코드에서 메게변수에는 아무 값도 들어가지 않는다.)
(그러나 할당이 되었을 때 값이 들어간다.)
console.log 같은 JS가 내장함수는 평가단계가 없다
즉시 실행이되어도 실행 컨텍스트가 생기는데 거의 바로 없어져서 기재를 하지 않는 편이다.
JS는 한번의 하나의 작업만 가능하다고 해서 싱글 쓰레드언어라고 한다
이벤트 루프
JS엔진은 싱글 쓰레드지만
Web Api는 멀티 쓰레드처럼 여러가지를 한번에 처리한다.
비동기 작업을 관리하고 순서대로 프로그램의 실행 흐름을 제어하기 위한 장치
JS 엔진에는 메모리가 2개가 있다
heap 과 call stack이라는 저장소가 있다.
객체나 배열 값들이 heap이 저장되고
원시값은 call stack에 저장된다.
Web api에는 setTimeout , fetch , addEventListener
Callback Queue는 구분이 되는 Queue가 2개 있는데
fetch() .then(cb) => cb는 Task Queue
New Promise().then(cb) => cb는 Micro Task Queue
Promise는 JS 내장되어 있기 때문에
fetch는 web api를 거쳐서 사용되기 때문에
Task Queue로 들어오는 특징이 있는 것
Web api가 뱉어내는 콜백 함수들은
Task Queue 통로를 통해 지나간다.
Micro Task Qeue가 1순위고
Task Queue가 2순위로 Call Stack 들어간다
즉 Micro Task Queue가 비워질 때 까지 1번이고
위가 비워졌을 때 Task Queue가 그제서야 들어간다.
콜 스택이 다 비워져야 -> Micro Task Queue -> Task Queue
setTimout fetch가 동시에 있을 때는
setTimeout이 0초면은 Task Queue에 줄 서는건 똑같이 슨다
그러나 setTimeout이 1초고 fetch가 받아오는 시간이 더 빠르다면?
그럼 fetch가 먼저 줄을 서는 것이다.
그러나 fetch가 setTimeout이 지정한 시간초보다 빠르면
setTimeout이 먼저 Task Queue에 줄을 선다
(새치기 없이 줄을 서는 구조다.)
