[Javascript] 이벤트 루프

콜스택과 힙 왜 나누어져 있는가?

콜 스택은 원시타입과 함수 호출의 실행 컨텍스트를 저장
힙은 동적으로 변할 수 있는 참조 타입 값을 저장

콜 스택은 원시 타입 값이 저장되고
실행컨텍스트를 통해서
1) 변수의 이름 저장
2) 스코프체인 this 관리
3) 코드 실행 순서 결정

힙은 참조 타입 객체가 저장된다. 메모리를 동적으로 할당

실행 컨텍스트

코드가 실행되는 환경

변수

컴퓨터는 cpu를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체 (1바이트 8비트)

변수 값의 위치를 가리키는 상징적인 이름

할당 : 변수의 값을 저장
참조 : 변수에 저장된 값을 읽어 들이는 것

식별자는 값이 아니라 메모리 주소를 기억하고 있다.

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만
값의 할당은 소스코드가 순차적으로 실행되는 런타임에 실행된다.

콜 스택과 힙

1) 처음에는 전역 실행 컨택스트가 생성되고, 원시값은 콜 스태에게 참조값은 힙에 저장된다.
2) 함수를 실행하게 되면은 함수 실행 컨텍스트가 생성되고, 새로운 원시값과 참조값이 콜 스택과, 힙에 저장된다.
3) 함수가 종료되면 콜스택의 함수 실행 컨텍스트가 콜스택에서 제거된다.
4) 전체 코드 실행이 끝나고 GEC가 콜스택에서 제거된다.
5) 힙의 객체를 참조하는 스택의 값이 없기 때문에 가비지 컬렉션에 의해 제거된다.

가비지컬렉션

자동으로 메모리를 관리하는 프로세스를 말합니다. 
JavaScript는 메모리를 동적으로 할당하고 해제하는 언어
객체에 대한 참조가 존재하지 않을 경우, 해당 객체는 가비지 객체로 판단하여 메모리에서 해제됩니다.

이벤트 루프

1) 자바스크립트는 단일 쓰레드 -> 블로킹이 일어난다.
2) 비동기 요청을 처리하기 위해서 이벤트 루프가 존재
-> 이벤트 루프는 자바스크립트 엔진이 아니라 그 환경에 속한다.
-> 비동기 요청은 블로킹을 없앨 수 있다.

태스크 큐와 마이크로태스크 큐

1) 테스크 큐
-> settimeout(), ui 렌더링, setinterval, requestanimationframe()

2) 마이크로태스크 큐
-> promise, mutationobserver

마이크로태스크 큐 > 테스크 큐