자바스크립트는 싱글스레드 기반의 Non-blocking으로 동작한다.
Call Stack
call stack은 함수의 호출을 저장하는 자료구조이다.
어떤 함수를 호출하면 스택에 쌓고 또 다른 함수를 호출하면 그 다음 스택에 쌓으면서 가장 위에 쌓은 함수를 먼저 처리한다.
var func1 = () => {
func2();
console.log('Call func1');
}
var func2 = () => {
func3();
console.log('Call func2');
}
var func3 = () => {
console.log('Call func3');
}
func1();
//return
//Call func3
//Call func2
//Call func1가장 늦게 호출하여 위에 쌓인 함수가 가장 먼저 호출되어 출력된다.
Call Stack은 싱글 스레드이기 때문에 하나만 존재한다.즉,한 번에 하나의 일만 한다.
프로그램의 어느 위치에 있는지를 기록하는 자료구조.
스택에서 실행되는 함수가 처리 되는데 긴 시간이 걸린다. 그로인해 다른 작업을 할 수가 없으므로 브라우저가 멈추게 된다. 이와 같은 현상을 해결하기 위해 비동기 콜백을 사용하고, 그 도움을 주는 요소들이 바로 event queue, event loop이다.
Memory Heap
memory Heap은 객체를 저장하는 곳이다. 예제에서 선언한 함수 func1,func2,func3는 모두 Memory Heap에 저장된다.
Web API
web API는 브라우저에서 제공하는 API들이다.
Callback Que
Callback Que는 함수를 저장하는 자료구조이다.
콜백함수나 비동기적으로 실행되는 함수들이 쌓여 호출되기를 기다리는 공간이다.
보통 Web API와 연계되어 인자로 넘어간 콜백 함수들이 추가된다.
(Web API는 우리가 아는 DOM,AJAX,setTimeOut 같은 호출만 가능한 함수들이 있다. 즉,AJAX를 이용해 통신을 한다고 하면 인자로 넘긴 콜백함수가 AJAX의 함수가 실행되고 난 뒤에 이벤트 큐에 추가되는 방식이다.
Call stack과는 다르게 가장 먼저 들어온 함수를 먼저 처리한다.
특정 이벤트에 따른 콜백 함수를 정의하면, 콜백 함수는 Callback Que에 저장된다.
Event Loop
Evnet Loop는 call stack이 다 비워지면 callback que에 존재하는 함수를 하나씩 호출 스택으로 옮기는 역할을 한다.
콜 스택이 비어있고 이벤트 큐에 작업이 있으면 제일 앞에 있는 작업을 콜스택에 추가한다. 이러한 반복을 tick이라고 한다.
Example
var func1 = () => {
setTimeout(()=> {
console.log('2초 뒤에 실행하는 콜백함수')
},2000);
}
var func2 = () => {
for (var i=-; i<8000000000; i++){
}
console.log('약 5초가 걸리는 함수')
}
func1();
func2();
//return
//약 5초가 걸리는 함수
//undefinded
//약 2초 뒤에 실행하는 콜백함수약 5초 뒤에 '약 5초가 걸리는 함수'라는 문자열이 출력되고 바로 이어 '2초 뒤에 실행하는 콜백함수'라는 문자열이 출력된다.
