[JS] 동작원리 (Stack, Queue, event loop)

 

• Memory Heap: 메모리 할당이 일어나는 곳
• Call stack: 코드 실행에 따라 스택 프레임이 쌓이는 곳
• Web APIs : DOM, AJAX, Timer 등 브라우저에서 제공하는 api
• Callback queue : 콜백 함수들이 대기하는 곳
• Event Loop : call stack이 비워질 때마다 callback queue에 대기 중인 콜백함수가 있다면, callback 함수를 call stack에 보내줌.

 

 

 

 

자바스크립트는 싱글 스레드(single-threaded) 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다. 

하지만 이벤트 루프(event loop)라는 메커니즘을 통해 비동기(asynchronous) 처리가 가능해집니다.

이벤트 루프는 자바스크립트 엔진이 비동기 작업을 처리할 수 있도록 하는 런타임 환경의 일부입니다.

 이벤트 루프는 두 가지 큰 역할을 수행합니다.

첫째, 이벤트 루프는 호출 스택(call stack)과 이벤트 큐(event queue)를 관리합니다. 호출 스택은 현재 실행 중인 함수의 목록을 저장하고, 이벤트 큐는 비동기 작업에서 실행할 콜백 함수들의 대기열을 저장합니다.

둘째, 이벤트 루프는 호출 스택이 비어있을 때, 이벤트 큐에서 새로운 콜백 함수를 가져와 호출 스택으로 이동시킵니다. 이렇게 호출 스택에 새로운 함수가 추가될 때마다 실행되면서 비동기 작업을 처리할 수 있습니다.

예를 들어, setTimeout() 함수는 일정 시간이 지난 후에 콜백 함수를 이벤트 큐에 추가합니다. 이벤트 루프는 호출 스택이 비어있을 때, 이벤트 큐에서 해당 콜백 함수를 가져와 호출 스택으로 이동시킵니다. 이렇게 콜백 함수가 호출 스택에 추가되면 실행되어 결과를 반환하고, 다음 이벤트를 처리하기 위해 이벤트 루프가 대기합니다.

이벤트 루프를 통해 자바스크립트는 비동기 작업을 처리할 수 있으며, 이를 통해 사용자 경험을 향상시키는 등의 다양한 기능을 구현할 수 있습니다.