[FE] 📚 자바스크립트의 특징
🤗 오늘의 위클리 페이퍼는
자바스크립트의 특징에 대한 토픽입니다.
📗 자바스크립트의 특징
자바 스크립트는 싱글 스레드 기반의 언어입니다.
여기서 스레드란 작은 단위의 실행 흐름을 말합니다.
자바스크립트 엔진을 간단히 살펴보면 위와 같이 Memory Heap과 Call Stack으로 구성되어 있는데요
하나의 스레드에서 하나의 Call Stack으로 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하고,
다음에 어떤 함수가 도출되어야 하는지 등을 제어합니다.
📙 런타임 환경
위에서 확인한 것 처럼 자바스크립트 엔진은 단일 Call Stack으로 요청이 들어온 순서대로 한가지 일만 수행합니다.
그러면 setTimeout과 같이 타이머가 완료된 뒤 callback 함수를 실행하는 비동기 함수는 어떻게 실행할까요?
비동기 요청은 자바스크립트 엔진을 구동하는 런타임 환경에서 담당합니다.
브라우저의 경우 setTimeout을 예로 들면, Call Stack에서 Wep API setTimeout 요청 이후 제거됩니다.
Web API에서 setTimeout이 완료되면 setTimeout callback 함수를 Callback Queue로 옮깁니다.
현재 실행한 자바스크립트 코드를 모두 실행한 뒤, Event Loop가 지속적으로 Call Stack이 비어 있는지 확인하고,
비어있다면 Callback Queue에 있는 작업 순서대로 Call Stack으로 넘겨 실행하도록 만듭니다.
✅ 요약
자바스크립트 엔진 구조
싱글 스레드: 자바스크립트는 단일 스레드에서 실행되며, 동시에 하나의 작업만 수행할 수 있습니다.
콜 스택(Call Stack): 현재 실행 중인 함수와 다음에 실행될 함수를 제어합니다.
메모리 힙(Memory Heap): 동적으로 생성되는 객체들이 할당되는 곳입니다.
비동기 작업 처리
비동기 함수(setTimeout 등)는 자바스크립트 엔진이 아닌 런타임 환경(브라우저나 Node.js)에서 관리합니다.
Web API: 브라우저에서 제공하는 기능으로, 비동기 함수들이 실행됩니다. 예를 들어, setTimeout 함수가 여기서 동작합니다.
콜백 큐(Callback Queue): 비동기 작업이 완료되면 콜백 함수가 이 큐로 이동합니다.
이벤트 루프(Event Loop)
이벤트 루프는 콜 스택이 비어 있는지 지속적으로 확인합니다.
콜 스택이 비어 있으면 콜백 큐에서 대기 중인 콜백 함수를 콜 스택으로 이동시켜 실행합니다