웹브라우저의 자바스크립트해석
크롬등의 웹브라우저가 자바스크립트를 해석하는 과정
1 파싱과 컴파일링:
자바스크립트 엔진은 먼저 코드를 읽고 파싱하여 추상 구문 트리(Abstract Syntax Tree, AST)로 변환한다. 이 트리는 코드의 구조를 나타내며, 엔진은 이를 바탕으로 기계가 이해할 수 있는 저수준 언어로 컴파일한다.
2 실행 컨텍스트 생성:
자바스크립트는 '실행 컨텍스트(execution context)'를 사용하여 코드의 실행 환경을 관리한다. 전역 실행 컨텍스트가 먼저 생성되며, 함수가 호출될 때마다 새로운 실행 컨텍스트가 스택에 추가된다.
3 스택(Stack):
자바스크립트는 함수 호출을 관리하기 위해 콜 스택을 사용한다. 콜 스택은 LIFO(Last In, First Out) 방식으로 작동하며, 가장 최근에 호출된 함수가 스택의 맨 위에 위치한다. 함수 호출이 완료되면 스택에서 제거된다.
4 힙(Heap):
객체와 같은 복잡한 데이터 타입은 힙에 저장된다. 힙은 구조화되지 않은 넓은 메모리 영역으로, 동적 할당이 이루어진다. 변수에 할당된 객체나 배열 등은 힙에 저장되며, 스택에 있는 해당 변수는 힙의 해당 메모리 주소를 참조한다.
5 이벤트 루프와 콜백 큐:
자바스크립트는 단일 스레드 언어이지만, 비동기 작업을 처리할 수 있다. 이벤트 루프는 콜백 큐에 있는 작업(예: 이벤트 핸들러, 타임아웃 등)을 감시하고, 콜 스택이 비었을 때 큐에서 작업을 가져와 실행한다.
단일 스레드 언어인 자바스크립트가 비동기 작업을 처리하는 과정에서 종종 알 수 없는 순서로 실행이 된다.
왜일까?
ex)
console.log(2)
setTimeout(() => {console.log(3);}, 0);
console.log(4)코드가 있을때,
콜 스택에서 console.log(2) 실행
setTimeout 에 의해 (비록 0초라 하더라도) 콜백 큐로 이동하여 대기
콜 스택에서 console.log(4) 실행
콜 스택이 비었으므로 콜백 큐에서 console.log(3) 을 콜 스택으로 이동
콜 스택에서 console.log(3) 실행
따라서 콘솔엔 2 4 3 순으로 출력이 된다.
참고
