콜스택

자바스크립트 엔진 종류

• V8: 구글에서 개발한 오픈소스 엔진. C++로 작성되었으며, 구글 크롬과 Node.js에서 사용된다. 자바스크립트 엔진 중에 가장 유명하다.
• SpiderMonkey : 최초의 자바스크립트 엔진이다. 넷스케이프 네비게이터 웹 브라우저를 위해 개발되었으나, 지금은 모질라 파이어폭스에 사용되고 있다.
• JavaScriptCore : 애플에서 개발한 사파리 브라우저에서 사용중인 오픈소스 엔진이다.

자바스크립트는 단일 스레드

• 자바스크립트는 단 하나의 스레드로 1개의 작업만 다룰 수 있음
• 힙, 큐와 함께 단일 콜스택 을 가짐

콜스택(Function)

• 함수의 호출을 기록하는 자료구조
• 함수가 실행시키면 콜스택에 쌓임(push), 함수가 반환되면 콜스택에서 pop
• 제일 먼저 main 함수를 쌓음
• 단 하나의 콜스택을 가짐
  -> 한번에 하나의 작업만 수행할 수 있으므로 하나의 함수가 끝날 때까지 다른 함수를 수행하지 못함

힙(Memory)

• 변수와 객체를 할당하는 메모리 공간
• 더이상 사용되지 않는 변수, 객체는 가비지컬렉션에 의해 정리됨

큐(Event Queue/Task Queue)

• 비동기 콜백함수가 담기는 리스트
• setTimeout, http, Dom 이벤트, 버튼 이벤트 등의 비동기함수는 자바스크립트 엔진 밖으로 나와 콜백함수가 Event Queue에 담기게 됨
• 콜스택이 비어있을 때 이벤트루프에 의해 호출스택에 쌓이고, 실행됨

이벤트 루프

• 콜스택과 이벤트큐를 지켜보며 콜스택이 비는 시점에 스택에 밀어넣는 일을 담당함
• 자바스크립트는 싱글스레드로 동시성이 불가능하지만 이벤트 루프에 의해 동시성을 가질 수 있게됨

순서

1. 비동기 함수(setTimeout, http, Dom 이벤트, 버튼 이벤트)는 콜스택에 의해 실행되며 Web API를 호출함
2. Web API는 콜백함수를 Event Queue에 enQueue함
3. 이벤트 루프는 콜스택과 이벤트큐를 지켜보다가 콜스택이 비는 시점에 이벤트큐의 첫번째 큐에 존재하는 콜백함수를 스택에 push
4. 콜스택에 의해 콜백함수가 실행됨

setTimeout 예시

setTimeout(function(){
	console.log('first');
}, 1000);
console.log('second');

1. setTimeout 호출
2. console.log('second')가 콜스택에 쌓이고 실행됨
3. 콜스택이 비게 되어 이벤트루프가 콜백 함수를을 콜스택에 넣어줌
4. 콜백 함수가 실행됨 console.log('first')
   -> 0초 뒤에 함수를 실행해라x -> 0초 뒤에 콜백 함수를 이벤트 큐에 넣어라