1. 자바스크립트 런타임 환경
- 정의 : 자바스크립트가 구동되는 환경
- 종류 : 웹 브라우저, Node.js
흔히 자바스크립트 엔진 , 태스크 큐 (콜백 큐), Web API, 이벤트 루프가 그려진 그림을 자바스크립트 런타임 환경이라고 한다.
1. 자바스크립트 런타임 환경의 구성요소
1. 자바스크립트 엔진
- 크롬은 자바스크립트 엔진으로 V8를 사용하고 있다.
- V8는 구글에서 개발한 오픈 자바스크립트 엔진으로 C++으로 만들어져있으며 Node.js, 크롬 브라우저 등에서 사용된다.
- 싱글스레드를 제공한다.
1. 콜 스택 (Call stack)
- 소스코드 평가과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 실행 컨텍스트 스택이다. 코드 실행순서 관리 등을 수행하는 역할이다.
- 함수 호출 -> 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시됨 -> 순차적으로 실행
- 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트(실행중인 실행 컨텍스트)가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다.(논 블로킹)
2. 힙 (Heap)
- 참조타입 (객체 등) 데이터들이 저장되는 공간.
- 변수나 상수 등에 사용되는 메모리를 저장하는 영역
- 객체는 크기가 정해져 있지 않으므로 메모리 공간의 크기를 런타임에 결정한다. 구조화되어있지 않다는 특징이 있다.
2. 브라우저 환경
1. 태스크 큐 (Task queue / event queue / callback queue)
- setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수, 또는 이벤트 핸들러가 일시적으로 보관되는 영역, Web API결과값을 쌓아두는 큐이다.
2. 이벤트 루프 (Event Loop)
- 콜 스택에 실행중인 실행 컨텍스트가 있는지, 태스크 큐에 대기중인 함수가 있는지 반복으로 확인하여 콜 스택이 비었으면 순차적으로(FIFO) 태스크 큐에 대기중인 함수를 비동기 처리 방식으로 콜 스택으로 이동시킨다.
- 이벤트 루프를 막는다 : 스택에 느린 코드(이미지 처리, 애니메이션이 잦은 경우)를 쌓아서 브라우저가 할일을 못하게 만드는 것.
3. Web API
- 자바스크립트 런타임 환경에 존재하는 별도의 API로, setTimeout의 인자로 콜백함수와 지연시간을 입력해서 호출한다.(5초를 설정했다면 5초를 카운트하고 5초 후에 콜백함수를 실행시키는 역할을 한다.)
- 작동이 완료되면 콜백을 태스크 큐에 푸시한다.
- 이벤트 핸들러, HTTP/AJAX요청들을 처리하며 데이터 가져오기를 완료하거나 타이머가 도달했다면 태스크큐에 푸시한다.
2. 예상 질문
1. 실행 컨텍스트
- 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.
- 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.
- 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨텍스트 스택으로 관리한다.
1. 소스코드의 타입
1. 전역 코드
전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다. var키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야 한다. 이를 위해 전역 코드가 평가되면 전역 실행 컨택스트가 생성된다.
2. 함수 코드
함수 코드는 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리해야 한다. 그리고 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야 한다. 이를 위해 함수 코드가 평가되면 함수 실행 컨텍스트가 생성된다.
3. eval 코드
eval코드는 strict mode(엄격 모드)에서 자신만의 독자적인 스코프를 생성한다. 이를 위해 eval코드가 평가되면 eval실행 컨텍스트가 생성된다.
4. 모듈 코드
모듈 코드는 모듈별로 독립적인 모듈 스코프를 생성한다. 이를 위해 모듈 코드가 평가되면 모듈 실행 컨텍스트가 생성된다.
2. 소스코드의 평가와 실행
자바스크립트 엔진은 소스코드를 소스코드의 평가와 소스코드의 실행 과정으로 나누어 처리한다.
- 소스코드 평가 : 실행 컨텍스트 생성, 변수/함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다.
- 소스코드 실행 : 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행된다(런타임 시작). 소스코드 실행에 필요한 정보(변수나 함수의 참조)를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다. 그리고 변수 값의 변경 등 소스코드의 실행결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다.
3. 실행 컨텍스트의 역할
- 선언에 의해 생성된 모든 식별자(변수, 함수, 클래스 등)를 스코프를 구분하여 등록하고, 상태 변화(식별자에 바인딩된 값의 변화)를 지속적으로 관리할 수 있어야 한다.
- 스코프는 중첩 관계에 의해 스코프 체인을 형성해야 한다. 즉, 스코프 체인을 통해 상위 스코프로 이동하여 식별자를 검색할 수 있어야 한다.
- 현재 실행 중인 코드의 실행 순서를 변경(ex. 함수 호출에 의한 실행 순서 변경)할 수 있어야 하며, 다시 되돌아갈 수도 있어야 한다.
실행 컨택스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.
식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.
식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨텍스트 스택으로 관리한다.
1. 실행 컨텍스트 스택
코드의 실행순서 관리
2. 렉시컬 환경
실행 컨택스트를 구성하는 컴포넌트, 스코프와 식별자를 관리
