Call Stack / Queue

• 자바스크립트는 싱글 스레드이면서 논블로킹이다. 즉 Call Stack에서 한 번에 하나의 처리만 할 수 있다.

• 자바스크립트 엔진은 memory heap(저장장소, 선언한 변수들이 어디에 저장되어있는지 기록하는 장치), Call Stack으로 자바스크립트 파일을 기계어로 바꿔서 컴퓨터가 실행할 수 있도록 해주는 역할을 한다.

Call Stack?

나중에 들어간 것이 먼저 나온다. function을 호출하면 Call Stack에 쌓이게 되고 쌓인 함수들을 하나씩 실행하는 역할을 한다. 어떤 함수를 Call하고 실행할 수 있는 지 알 수 있다.

Web APIs

• 브라우저에서 제공하는 API들이 있다.

대표적인 API

• DOM
• AJAX
• Timeout

console.log('Hi')
setTimeout(function cb1(){
	console.log('cb1')
},5000)
	console.log('Bye')

1. console.log(’Hi’)를 Call 했으므로 Call Stack에 쌓이게 된다.

2. 실행이 되면 Browser console에 찍히게 되고, Call Stack에서 빠져나가게 된다.

3. 이어 setTimeout 함수를 호출하여 Call Stack에 쌓이게 된다.

4. setTimeout이 실행되면 cb1 콜백을 가지고 등록이 된다. setTimeout에 입력했던 시간이 지나면 타이머가 끝이난다.

5. 그 전에 이미 setTimeout은 실행이 되었기 때문에, Call stack에서 사라져야 한다.

Call Stack은 비어있기 때문에 console.log(’Bye’)가 들어오게 된다. 자바스크립트는 콜 스택을 비우고 싶어한다.

6. Bye도 출력이 되면 console.log(’Bye’) 역시 Call Stack에서 사라지게 된다.

Callback Queue

• 등록했던 시간이 지나게 되면 cb1 콜백이 Queue 안으로 들어오게 된다.
• 첫 번째로 들어온 것이 첫 번째로 나간다.
• callback은 인자로 전달된 function
• 이 function들이 queue처럼 쌓여있는 것을 말한다.

Event Loop

• Call Stack을 계속 보고 있다가 텅 비어있으면 Callback Queue에 있던 cb1 콜백(맨 앞에 있는 콜백)을 Call Stack에 전달해준다. 화살표 모양은 Call Stack과 Callback Queue를 항상 보고 있다는 의미

7. cb1이 종료가 되기전이므로 cb1위에 쌓이게 된다.

예제

// 1번
let num = 1;

// 2번
setTimeout(() => {
  num = 2;
}, 0);

// 3번
num = 3;

// 4번
console.log(num);

• 먼저 결과는 2가 출력된다. 3이 출력될거라고도 생각이 들었지만 setTimeout 두 번째 파라미터가 0이라도 Web APIs 라는 대기실에 들어가 있기 때문에, 가장 나중에 실행이 된다. 따라서 2이다.