자바스크립트는 싱글 스레드 런타임을 가지고 있다. 이말은 결국 한번에 하나의 싱글 콜 스택만을 가지고 있다는 말이다.
=> 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다.
콜스택
콜스택은 데이터 스트럭처로 실행되는 순서를 기억하고 있다. 함수를 실행하려면 스택에 해당하는 함수를 집어넣게 되는데 함수에서 리턴이 일어나면 스택의 가장 위쪽에서 해당 함수를 꺼내게 된다. (이것이 콜스택이 하는일의 전부)
테스크 큐
테스크 큐는 콜백 함수들이 대기하는 큐 형태의 배열이며, 이벤트 루프는 콜 스택이 비워질 때마다 큐에서 콜백함수를 꺼내와서 실행하는 역할을 한다.
이벤트루프와 동시성
자바스크립트는 한번에 하나만 할 수 있다. 자바스크립트는 다른 코드를 실행시키는 동안 Ajax요청을 실행할 수 없다. setTimeout역시 마찬가지다.
하지만, 이걸 동시에 할 수 있는 이유는 브라우저는 단순 런타임 이상을 의미하기 때문이다.
브라우저가 webAPI를 제공한다. 이들은 자바스크립트에서 호출할 수 있는 스레드를 효과적으로 지원한다.
모든 비동기 API들은 작업이 완료되면 콜백함수를 테스크 큐에 밀어넣는다(추가).
이벤트 루프에 대해 살펴보면 이것의 역할은 콜 스택과 테스크 큐를 주시하는 것이다. 콜스택이 비어있는지, 큐가 비어있는지 수시로 확인하는 역할을 한다. 스택이 비어있으면, 큐의 첫번 째 콜백을 스택에 쌓아 효과적으로 실행할 수 있게 해준다.
콜스택과 큐가 모두 비워져있으면 프로그램은 종료된다.
setTimeout(function(){
console.log('A');
},0);
console.log('B');위 코드를 예로 살펴보면, A를 출력하는 함수를 태스크 큐에 추가한다. 그리고 B를 출력한 뒤, 콜 스택이 비게 되어, 이벤트 루프가 태스크 큐에 저장된 함수를 콜 스택에 넣어준다. 따라서 출력 순서는 B=>A가 된다.
한가지 짚고 넘어갈 사실은 0이라는 숫자가 실제로 즉시를 의미하지 않는다.
브라우저는 내부적으로 타이머의 최소단위(Tick)를 정하여 관리하기에 실제로는 그 최소단위만큼 지난 후에 태스크 큐에 추가된다. 이 최소단위는 브라우저마다 다르다. 예를 들어 크롬 브라우저의 경우 최소단위로 4ms 사용하기에 크롬에서 setTimeout(fn,0)은 setTimeout(fn,4)와 동일한 의미를 갖는다.
총정리)
자바스크립트는 싱글 스레드로 한번에 한 가지일밖에 못하는 언어이기에 그 일이 수행하는 동안 다른 것들은 안되는 blocking을 하게 된다. 그것을 위해 setTimeout과 같은 비동기 api를 사용해도 저장할 곳이 따로없어서 사라져 버린다.
그걸 해결하기 위해 나온 것이 event loop.
과거에는 stack하나만 있어서 순서대로 한번에 한가지 일만 처리하던 자바스크립트에 web api와 queue를 추가해 대기할 수 있도록 대기장소를 만든 것이다.
이제 AJAX,setTimeout같은 콜백을 사용하면 이 콜백은 web api에 저장되고 queue에서 대기를 한다. 그리고 stack에 있는 코드가 실행이 되고 비어지면 queue에 있던 것들이 순서대로 stack으로 가서 실행을 한다.
그리고 이 과정에서 나온 콜백의 단점을 보완하기 위해 promise문법이 나온 것이고 그 promise를 더 빠르고 간편하게 쓰기 위해 async/await문법이 나온 것이다.
참고: https://kjwsx23.tistory.com/311
https://m.blog.naver.com/sonocamel/222233485764
