AncomWiki

자바스크립트 동작 원리: 엔진, 런타임, 호출 스택

Properties1
description자바스크립트는 V8 엔진과 같은 JS 엔진(Memory Heap, Call Stack)과 브라우저가 제공하는 Web API(DOM, setTimeout 등), 그리고 Event Loop 및 Callback Queue로 구성된 런타임 환경에서 동작합니다. JS는 단일 스레드(Single-threaded)이며, Call Stack 은 함수 호출 순서를 관리합니다. Call Stack 이 가득 차면 Stack Overflow 가…

6 min read

자바스크립트 동작 원리: 엔진, 런타임, 호출 스택

Source

  • Evernote/Inbox/자바스크립트의 동작원리 엔진, 런타임, 호출 스택 • Captain Pangyo.md

Summary

자바스크립트는 V8 엔진과 같은 JS 엔진(Memory Heap, Call Stack)과 브라우저가 제공하는 Web API(DOM, setTimeout 등), 그리고 Event Loop 및 Callback Queue로 구성된 런타임 환경에서 동작합니다. JS는 단일 스레드(Single-threaded)이며, Call Stack 은 함수 호출 순서를 관리합니다. Call Stack 이 가득 차면 Stack Overflow 가 발생하며, 장시간 실행되는 동기 작업은 UI 렌더링을 차단하여 브라우저 응답 불가 상태를 유발할 수 있습니다. 이를 해결하기 위해 비동기 처리와 이벤트 루프가 필요합니다.

Key Points

  • 자바스크립트 엔진(V8 등)은 Memory Heap(메모리 할당)과 Call Stack(코드 실행 순서 관리)으로 구성됨
  • setTimeout, DOM 등 브라우저 내장 API 는 JS 엔진이 아닌 Web API 로 제공됨
  • JS 는 단일 스레드 언어로 한 번에 하나의 작업만 처리하며, Call Stack 은 현재 실행 위치를 추적함
  • 재귀 호출 등 Call Stack 한계 초과 시 ‘Maximum call stack size exceeded’ 에러 발생
  • Call Stack 에서 장시간 작업 실행 시 브라우저 UI 렌더링 및 사용자 입력이 차단됨 (Blocking)
  • 비동기 처리와 이벤트 루프(Event Loop) 는 UI 블로킹 없이 동시성(Concurrency)을 구현하는 핵심 메커니즘임

그래프 뷰