[Javascript] Javascript 동작 원리 [동기, 비동기]

Javascript 동작 원리

• 싱글 스레드로 동작하는 언어
• 자바스크립트의 V8 엔진은 싱글 스레드를 가지고 있어 단 하나의 stack을 가짐

V8 엔진

• 자바스크립트 코드를 실행하는 엔진으로 싱글 스레드에서 동작
• 자바스크립트 코드를 바이트코드로 컴파일한 후 실행
  → Java의 JVM과 비슷한 역할
• 콜 스택과 메모리 힙을 이용해 코드 실행을 관리

 

싱글 스레드

• 하나의 스레드만을 사용해 코드가 실행된다는 의미
• 이 스레드는 메인 스레드라 불리며, 하나의 콜 스택(call stack)에서 실행

단일 호출 스택 (Call Stack)

• 자바스크립트 엔진은 하나의 메모리 힙과 단일 호출 스택을 가짐
  → 즉, 엔진 구조 상 하나의 함수만 동기적으로 실행 가능
• 자바스크립트 엔진이 실행하는 코드는 콜스택에 쌓이고 콜스택은 Stack과 같이 LIFO(Last In First Out) 방식으로 동작
  → 함수가 호출될 때마다 스택에 쌓이고 실행이 끝나면 스택에서 빠짐
• 메모리 힙 (Memory Heap)
  • 이 부분은 자바스크립트에서 객체나 배열 같은 동적으로 할당되는 메모리 공간을 담당
  • 콜 스택과는 별개의 메모리 영역이기 때문에, 힙에 저장된 데이터는 콜 스택과는 별도로 관리

비동기 처리

• 요청을 보낸 후 응답과 관계 없이 다음 동작(코드)을 실행할 수 있는 방식
  → 함수를 호출 하면 응답(return)을 기다리는 것이 일반적이나, → 동기
  호출을 하고 응답(return)을 기다리지 않고 다음 명령(코드)을 실행 → 비동기

비동기 처리 지원 방식

• Javascript는 싱글 스레드이기 때문에 비동기 처리를 할 수 없지만, Javascript 엔진 외부에서 Javascript 실행에 관여하는 요소(자바스크립트 런타임 환경)들이 존재
  → Web API, Task Queue, Event Loop

Javascript Runtime

• Javascript 엔진
• Web API
• Event Loop
• Callback Queue (Task Queue)

자바스크립트 엔진(V8)

• 자바스크립트를 실행하는 엔진
• 콜 스택(Call Stack)과 메모리 힙(Memory Heap)을 사용
• 주요 역할
  • 콜 스택에서 동기적으로 함수를 실행
  • 비동기 작업은 런타임 환경에 위임

Web API

• 브라우저나 NodeJS에서 제공되는 API이며, 비동기 작업을 실행
• 브라우저의 Web API 예시
  • 타이머 : setTimeout, setInterval
  • 네트워크 요청 : fetch, XMLHttpRequest
  • DOM 이벤트: addEventListener로 등록된 이벤트
• 비동기 함수(예: setTimeout) 호출 시
  1. JS 엔진(Call Stack)은 Web API에 요청을 전달하고 콜백 함수를 함께 넘김
  2. 요청 완료 시 Web API는 콜백 함수를 Callback Queue(Task Queue)에 추가

Callback Queue (Task Queue)

• 비동기 작업(Web API)이 완료되면 관련된 콜백 함수가 Callback Queue에 저장
• 큐(Queue)는 FIFO(First In, First Out) 방식으로 콜백을 관리

Event Loop

• Event Loop는 Call Stack과 Callback Queue 사이에서 중재 역할
• 주요 역할
  • Call Stack이 비어 있는지 확인
  • Callback Queue에 작업이 있다면, 이를 Call Stack으로 옮겨 실행
  • Call Stack이 비어있지 않다면 Callback Queue의 콜백 함수는 대기 상태

비동기 작업 처리 과정 전체 흐름

1. Call Stack에서 setTimeout 함수 호출 시 Web API에 요청 전달
2. Web API에서 타이머 작업 처리 후 콜백 함수를 Callback Queue에 전달
3. Event Loop가 Call Stack이 비어 있는지 확인
4. Callback Queue에서 콜백 함수를 Call Stack으로 옮김
5. 콜백 함수 실행

---

참고 자료

https://hi-zini.tistory.com/entry/JavaScript-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC

JavaScript 동작원리