자바스크립트는 싱글 스레드 기반의 언어이다. 하지만 실제로 브라우저에서 자바스크립트로 인해 여러가지 일들이 동시에 처리되는 것처럼 보인다.
간단한 예로 개발자들에게 익숙한 setTimeout api는 입력한 콜백함수를 특정 시간 뒤에 실행하게 해주는 함수이다. 자바스크립트는 앞서 말했듯이 싱글 스레드 기반의 언어이기에 타이머를 작동시키면서 다른 작업을 순차적으로 수행할 수는 없다. 그래서 브라우저는 브라우저의 기본적인 구성 요소인 자바스크립트 엔진을 포함해서 자바스크립트 엔진과 함께 협력하는 다른 요소들도 가지고 있다.
보통 브라우저 자체를 자바스크립트 런타임 환경이라고 부른다. 자바스크립트는 하나의 프로그래밍 언어일뿐 세상과 소통하기 위한 프로그램을 만들기 위해서 자바스크립트가 동작할 수 있는 환경이 필요한 것이다. Node.js 또한 대표적인 자바스크립트의 런타임 환경 중 하나이다.
자바스크립트 런타임 환경(브라우저)
메모리 힙과 콜 스택을 담고 있는 큰 회색 네모 파트는 자바스크립트 엔진이다. 기본적으로 자바스크립트를 읽고 해석하여 컴퓨터가 이해할 수 있는 기계어로 변환하는 역할을 한다.
Memory Heap
그냥 Heap이라고도 불린다. 자바스크립트 코드 내의 변수와 객체들이 할당되는 공간이다.
Call Stack
함수가 호출되는 순서대로 쌓이는 스택이다. 자료구조 중 하나인 'stack'이라는 이름을 가지고 있는 것에서 쉽게 유추할 수 있듯이 자바스크립트 엔진은 스택 제일 위에 있는 함수부터 실행시킨다. 그렇게 제일 위에 위치한 함수가 실행 완료되면 스택에서 사라지면서 순차적으로 함수들이 실행된다.
Web APIs
자바스크립트 엔진에 속한 것이 아니라 브라우저 런타임 환경에 속해 있다. 앞서 언급했던 setTimeout과 같은 api도 가지고 있고, 다양한 작업을 할 수 있는 많은 api들을 제공해준다. 대표적인 api들은 아래와 같다.
- 서버로 부터 데이터를 받기 위한 Fetch API
- DOM 조작 위한 API
- 그래픽 작업을 위한 Canvas API
- setTimeout과 같은 각종 timing functions
Callback Queue
Web APIs의 콜백 함수들이 호출된 순서로 대기하는 곳이다. 먼저 들어온 콜백 함수가 먼저 콜 스택으로 이동하게 된다.
Event Loop
콜백 큐에 쌓여있는 콜백 함수를 콜 스택에 넣어주는 역할을 한다.
그래서 콜 스택과 콜백 큐를 계속해서 모니터하고 있고, 콜 스택이 비어있을 때 콜백 큐에서 대기하고 있는 콜백 함수를 바로 콜 스택으로 전달한다.
자바스크립트는 싱글 스레드 함수이지만 이러한 자바스크립트 런타임 환경의 지원으로 비동기적으로 동작할 수 있는 것이다.
간단한 비동기 작업 진행과정 예시
console.log('피카츄 등장!');
setTimeout(function() {
console.log('삐까삐까');
}, 0);
console.log('백만 볼트 공격!!');- 먼저 콘솔 로그 함수가 콜 스택으로 들어가 실행(콜 스택 내부 함수 1개)
- '피카츄 등장!' 출력(콜 스택 내부 함수 0개)
- 다음으로 setTimeout api 콜 스택으로 들어가 호출되고 바로 콜 스택에서 사라진다.(콜 스택 내부 함수 0개)
- 비록 0초이지만 Web APIs에 0초로 타이머를 셋업한다.(콜 스택 내부 함수 0개)
- 0초이기에 바로 setTimeout 내의 콜백함수는 콜백 큐로 전달된다.(콜 스택 내부 함수 0개)
- 하지만 마지막 줄에 있는 콘솔로그가 콜 스택에 먼저 들어가 실행된다.(콜스택 내부 함수 1개)
- '백만 볼트 공격!!' 출력(콜스택 내부 함수 0개)
- 콜 스택이 비게 되면서 콜백 큐에 있던 콜백함수(콘솔 로그)가 콜 스택으로 전달되면서 실행(콜스택 내부 함수 1개)
- '삐까삐까' 출력(콜스택 내부 함수 0개)
아무리 setTimeout을 0초로 설정해도 위와 같은 구조로 동작하기에 제일 나중에 실행된다.
참고로 6번 과정은 4,5 번 이후에 실행된다기 보다는 먼저 실행될 수도 있을 것이다. 거의 동시에 실행된다고 보면 된다. 하지만 이해를 돕기 위해 넘버링하여 순서대로 적어보았다. 사실 글로 이해하기가 조금 어려울 것이기에 하단에 참고자료에 첨부한 우아한Tech 채널의 영상 후반부를 함께 보면 도움이 될 것이다.
참고자료
https://meetup.toast.com/posts/89
https://medium.com/@gemma.stiles/understanding-the-javascript-runtime-environment-4dd8f52f6fca