-
메모리 힙 (Memory Heap):
메모리 힙은 동적으로 할당된 메모리(객체, 변수 등)가 저장되는 곳입니다. JavaScript에서는 가비지 컬렉션(Garbage Collection)을 통해 더 이상 필요하지 않은 메모리를 자동으로 해제합니다. -
콜 스택 (Call Stack):
콜스택은 함수 호출의 실행 컨텍스트를 저장하는 자료구조입니다. 함수가 호출될 때 해당 함수의 실행 컨텍스트가 콜스택에 쌓이고, 함수가 실행을 완료하면 해당 실행 컨텍스트가 콜스택에서 제거됩니다. 콜스택은 Last In, First Out (LIFO) 구조를 가지고 있습니다. -
Web API:
Web API는 브라우저에서 제공하는 환경별 API를 말합니다.setTimeout,XMLHttpRequest등 비동기 작업을 처리하는 함수들이 여기에 속합니다. Web API는 백그라운드에서 동작하며 비동기 작업이 완료되면 콜백 함수를 콜백 큐로 보냅니다. -
콜백 큐 (Callback Queue):
콜백 큐는 비동기 작업이 완료된 콜백 함수들이 대기하는 큐입니다. 콜스택이 비어있을 때, 콜백 큐에서 함수가 콜스택으로 이동하여 실행됩니다. -
이벤트 루프 (Event Loop):
이벤트 루프는 콜스택과 콜백 큐를 주시하면서, 콜스택이 비어있는지와 콜백 큐에 함수가 있는지를 확인합니다. 콜스택이 비어있으면 콜백 큐에서 함수를 콜스택으로 이동하여 실행합니다.
let temp = 'temp';
const b = () => console.log('안녕하세용');
const a = () => b();
a();
- 실행 컨텍스트 (Execution Context):
실행 컨텍스트는 코드가 실행되는 환경을 추상화한 것으로, 스크립트가 실행될 때 생성되고 관리됩니다. 실행 컨텍스트는 변수 객체, 스코프 체인, this 등의 정보를 포함하며, 현재 실행 중인 코드의 환경을 나타냅니다.
처음 자바스크립트 코드를 실행하는 순간 사진의 (1) 처럼 전역 컨텍스트가 콜스택에 담깁니다.
브라우저의 경우 window, node 환경의 경우 global 같은 객체를 사용할 수 있는 이유입니다.
(1) 콜스택엔 전역 컨텍스트를 제외하곤 다른 컨텍스트가 없기에 전역 컨텍스트와 관련된 코드를 진행합니다.
(2) 전역 컨텍스트와 관련된 코드를 진행 중 a함수를 실행하였기에 a 함수의 환경 정보들을 수집하여 a 실행 컨텍스트를 생성, 콜스택에 담습니다.
콜스택 최상단에 a 실행 컨텍스트가 있기에 기존의 전역 컨텍스트와 관련된 코드의 실행을 일시적으로 중단한 후 a 실행 컨텍스트의 코드를 실행합니다.
(3) a 함수 내부에서 b 함수를 실행하였기에 b 함수의 환경 정보들을 수집, 실행 컨텍스트를 생성, 콜스택에 담습니다. 이전과 똑같이 콜스택 최상단에 b 실행 컨텍스트가 있기에 기존 a 실행 컨텍스트와 관련된 코드의 실행을 일시적 중단합니다.
(4) b 함수가 종료된 후 b 실행 컨텍스트가 콜스택에서 제거됩니다. 제거 후 콜스택 최상단에는 a 실행 컨텍스트가 있기에 이전에 중단된 지점부터 코드 진행이 재개됩니다.
(5) a 함수 또한 종료된 후 실행 컨텍스트가 콜스택에서 제거됩니다.
이후엔 전역 공간에 실행할 코드가 남아있지 않다면 콜스택에서 전역 컨텍스트 또한 제거되며 콜스택에 아무 것도 남지 않은 상태로 종료됩니다.
호이스팅과 관련하여 콜스택은 함수 호출 시 함수의 실행 컨텍스트를 콜스택에 추가하고, 함수 실행이 완료되면 콜스택에서 제거하는 역할을 합니다. 따라서 함수 내에서 변수와 함수 선언이 호이스팅되는 것을 콜스택을 통해 이해할 수 있습니다.
const bar = () => setTimeout(() => console.log("Second"), 500);
const foo = () => console.log("First");
const baz = () => console.log("Third");
bar();
foo();
baz();브라우저에서 이 코드가 실행될 때 어떤 일이 발생하는지 빠르게 알아보겠습니다.
1. bar를 호출해서 setTimeout을 반환합니다.
2. setTimeout에 전달한 콜백은 Web API에 추가되고, setTimeout, bar는 콜스택에서 빠져나옵니다.
3. 타이머가 실행되고, 그 동안 foo가 호출되고 "First"를 기록합니다. foo는 undefined를 반환하고, baz가 호출되고, 타이머 콜백이 콜백큐에 추가됩니다.
4. baz가 "Third"를 기록합니다. 이벤트 루프는 baz가 값을 반환한 후 콜스택이 비어있음을 확인합니다. 그 후 콜백이 콜스택에 추가됩니다.
5. 콜백이 실행되며 "Second"를 기록합니다.
Reference
https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
https://blog.gamguma.dev/post/2022/04/js_execution_context
