Javascript(3)

 

자바스크립트 엔진

 

자바스크립트의 대중적인 엔진은 구글의 V8 엔진입니다.

V8엔진은 크롬과 노드 안에서 동작하며 Memory Heap과 Call Stack으로 이루어져 있습니다.

 

메모리 힙: 프로그램이 실행될때 선언된 객체는 힙 메모리 영역에 할당됩니다.

변수, 객체에 대한 모든 메모리 할당이 발생되는 곳입니다.

 

호출 스택 : 코드가 실행될때 호출 스택이 쌓입니다.

 

실행 환경(Runtime)

 

브라우저에서 자바스크립트 개발자에게 제공하는 API가 존재합니다. 

브라우저는 엔진 하나만으로 구성되어 있지 않고 DOM, Ajax, setTime~~ 등등의 브라우저에서 제공하는 Web API들이 존재합니다. 이러한 Web API의 호출을 통제하기 위한 Event Queue와 Event Loop도 존재하고 있습니다.

 

 

호출 스택

자바스크립트는 단일 스레드 프로그래밍 언어입니다.

단일 스레드는 한 번에 하나의 일만 처리할 수 있다는 뜻입니다. 

호출 스택에는 실행되는 함수들을 순서대로 스택 맨 위에 하나씩 push 하게 됩니다.

함수가 return 하게 되면 맨 위에서부터 차례대로 스택에서 제거됩니다.

 

여기서 발생되는 오류가 존재합니다.

바로 스택 오버플로우인데 이름 그대로 스택의 사이즈를 초과했을 경우 발생하는 오류입니다.

만약 무한 루프에 빠지게 되면 쉽게 스택 오버플로우 에러를 볼 수 있을 것입니다.

 

자바스크립트는 단일 스레드 프로그래밍 언어라고 했는데 만약 하나의 함수 처리가 느려 다음 로직에 지장을 준다면 어떻게 해결해야 할까요? 

이럴 때 해결책으로 비동기 콜백을 사용하면 간단히 해결할 수 있습니다.

코드의 일부를 실행하고 나중에 실행될 콜백 함수를 제공합니다. 콜백 함수는 원하는 시점에 실행되는 함수이므로 스택 안에 바로 push 될 필요가 없기에 다음 로직이 작동될 수 있습니다.

 

이벤트 큐와 비동기 콜백의 처리과정

 

자바스크립트 실행환경은 이벤트 큐를 가지고 있습니다. 이벤트 큐는 처리할 메시지 목록과 실행할 콜백 함수들의 리스트입니다.

비동기 함수는 만약 이벤트가 발생되면 web API를 호출하며 web API는 콜백 함수를 이벤트 큐에 PUSH 합니다. 그럼 이벤트 큐는 대기하다가 스택이 비어졌을 시점에 이벤트 루프를 돌리면서 스택에 콜백함수를 PUSH합니다. 이벤트 루프는 큐와 스택, 두 부분을 지켜보다 스택이 비는 시점에 콜백을 실행시켜주는 역할입니다.

 

웹 브라우저에서는 이벤트가 발생될 때마다 메시지가 추가되고 이벤트 리스너가 첨부됩니다.

리스너가 존재하지 않는다면 이벤트가 사라지게 됩니다. 콜백 함수의 호출은 호출 스택의 초기 프레임으로 사용되며, 스택에 대한 모든 호출이 반환될 때까지 메시지 폴링 및 처리가 중지됩니다.