Runtime: 프로그래밍 언어가 구동되는 실행 환경
Javascript Runtime: (대표적으로) 웹 브라우저
자바스크립트 엔진
1. 콜 스택 (Call Stack)
- 코드가 실행될 때 콜 스택에 콜(호출)이 하나씩 쌓인다.
= 함수가 실행될 때 해당 함수의 기록이 가상의 공간인 콜 스택에 하나씩 쌓인다. - 자바스크립트는 기본적으로 코드를 동기식으로 처리한다.(한 번에 한 가지의 코드만 실행)
- Last in, First out 구조: 모든 실행 컨텍스트가 하나씩 순차적으로 쌓이고 가장 나중에 push된 실행 컨텍스트부터 종료되면 콜스택에서 제거된다.
2. 메모리 힙 (Memory Heap)
- 객체 사용시 콜 스택에 저장된 특정 주소에서 객체의 값을 참조한다.
- 이때 객체의 값이 저장되는 곳이 구조화되지 않은 메모리 영역인 메모리 힙이다.
- str,num,boolean 은 주소와 값을 모두 콜 스택에 저장, 참조형 데이터(배열, 객체, 함수)는 주소는 콜 스택에, 값은 메모리 힙에 저장
자바스크립트 브라우저 환경
- 자바스크립트 자체는 비동기적으로 처리하지 못하며, 런타임에서 지원하는 API로 비동기 처리를 할 수 있다.
1. 이벤트 루프 (Event Loop)
- Call Stack과 Task Queue를 주시하는 역할
- Call Stack이 비워지면 Task Queue에 쌓여있던 Task를 새로 콜 스택에 쌓는다.
- 이 과정이 바로 비동기 함수가 호출되는 방식이고, 싱글 스레드인 자바스크립트가 비동기적으로 데이터를 처리할 수 있는 이유다.
2. 태스크 큐 (Task Queue)
-
태스크 큐는 콜백 함수들이 대기하는 Queue ( First in, First out ) 형태의 배열이다.
= setTimeout() 이나 setInterval() 같은 비동기 함수의 콜백 함수, 이벤트 핸들러가 일시적으로 보관되는 영역 -
Web API같은 비동기 API 함수가 완료되면 콜백함수를 Task Queue에 추가한다.
-
매크로태스크 큐 (Macrotask Queue):
-
마이크로태스크 큐 (Microtask Queue):
참고 벨로그: https://velog.io/@hailey199535/%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%B2%98%EB%A6%AC-2
냐하