JavaScript 엔진이 코드 실행 전 Tokenizing과 Parsing으로 AST를 구성하는 과정

Context

JavaScript 엔진은 코드를 실행하기 전, 텍스트 상태의 소스 코드를 이해 가능한 구조로 변환해야 한다. 이 과정이 없으면 브라우저가 코드의 의미를 파악할 수 없다. Babel, ESLint, Prettier, TypeScript 등 모든 모던 도구는 이 구조를 활용한다.

Technical Solution

• Source Text → Tokenizing을 통해 키워드, 식별자, 연산자 등으로 분리한다
• Tokens → Parsing을 통해 AST 트리 구조로 조립한다
• AST는 공백과 세미콜론을 제거하고 의미 있는 구조만 보존한다
• 엔진은 Eager Parsing과 Lazy Parsing 두 가지 모드를 사용한다
• 즉시 실행되지 않는 함수는 Lazy Parsing으로 나중에 처리한다

Impact

단위

Key Takeaway

AST는 JavaScript 코드의 의미 구조를 트리 형태로 표현한 것으로, 모든 모던 JS 도구의이다.