이번 주부터 기술면접 스터디를 시작하게 되었다.
과제를 받고 3시간 동안 공부한 후 조원들과 발표하는 방식으로 진행하기로 했다.
3시간이면 깊이 들어가기엔 짧은 시간이지만 간단하게라도 정리해서 포스팅해보려고 한다.
자바스크립트 엔진의 구성
Memory Heap과 Call Stack
출처: 어쨌든 이벤트 루프는 무엇입니까? | Philip Roberts | JSConf EU
자바스크립트 엔진은 메모리 힙(Memory Heap), 콜 스택(Call Stack)으로 구성되어 있다.
- Memory Heap
- Call Stack
- 메모리 힙(Memory Heap): 참조 타입 데이터(객체)가 저장되는 공간. 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다. 메모리에 값을 저장하려면 메모리의 크기를 알아야 한다. 하지만 객체는 원시값과 달리 크기가 정해져 있지 않아서 메모리 코기를 런타임에 결정한다. 이를 '동적 할당'이라고 한다.
- 콜 스택(Call Stack): 실행된 코드가 쌓이는 장소. 원시 타입 데이터는 콜 스택에 바로 저장된다.
자바스크립트 엔진의 동작 순서
출처: 어쨌든 이벤트 루프는 무엇입니까? | Philip Roberts | JSConf EU
코드가 실행되면 동기 함수는 콜 스택에서 그대로 실행되고 비동기 함수는 Web API로 처리된다.
Web API는 ECAMScript 사양에 정의된 함수가 아니라 브라우저에서 제공하는 함수다. DOM API, 타이머 함수, HTTP 요청(Ajax) 등의 비동기 처리를 포함한다.
완료된 비동기 함수는 콜백 큐(Callback Queue, task queue, event queue)로 넘겨준다. 콜백 큐에는 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관된다.
참고로 태스크 큐와 별도의 큐인 마이크로태스크 큐(microtask queue, job queue)도 있다. 마이크로태스크 큐에는 프로미스의 후속 처리 메서드의 콜백 함수가 일시 저장된다. 마이크로태스크 큐는 태스크 큐보다 우선순위가 높다. 따라서 프로미스로 반환된 콜백함수가 다른 콜백함수보다 먼저 실행된다.
이벤트 루프는 콜 스택과 콜백 큐를 계속 지켜보면서
콜 스택이 비어있으면 콜백 큐에 있는 비동기 함수들을 콜 스택에 밀어넣는다. 그리고 콜 스택에서 함수를 실행하게 된다.
이때 콜백 큐에서 대기하고 있는 함수가 콜백함수다. 콜백 함수는 함수의 매개변수를 통해 다른 함수의 내부로 전달된다. 콜백 큐에서 대기하고 있다가 콜 스택이 비워져야 실행될 수 있기 때문에 자바스크립트의 비동기 프로그래밍이 가능하도록 해주는 중요한 패턴이다.
