이 포스트는 여러 블로그에서 참조한 내용을 제가 이해한대로 정리해보았습니다.
참고한 블로그 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf
혹시 제가 잘못 이해한 내용이 있다면 댓글 부탁드립니다.
동기(synchronuous) : 함수 A가 함수 B를 호출하고 B의 작업이 끝나야 A작업을 할 수 있음
비동기(Asynchronuous) : 함수 A가 함수 B를 호출하고 B의 작업은 신경쓰지 않고 자신의 코드를 계속 실행. B의 작업이 끝나면 콜백 함수 실행 (너 작업 끝나면 불러라 ~)
Stack : 차곡차곡 쌓아 올린 자료 구조이기에 제일 먼저 들어온 데이터는 밑으로 간다 . 후입선출
JS는 싱글스레드이다 하나의 Call Stack을 가지고 있어서 한 번에 하나의 명령어만 실행된다
-> 한 번에 여러가지를 못하고 하나씩만 처리함 -> JS는 싱글스레드, 동기식 언어
??? JS는 비동기 아니야?
비동기 작업을 수행하기 위한 존재들(웹 브라우저 or Runtime에서 지원)
- Web API :IO에 관련된 로직(addEventListener, setTimeout, Ajax)를 처리(https://developer.mozilla.org/ko/docs/Web/API)
- Callback Queue : API에서 처리하고 난 뒤 Callback들이 담김
- Event Loop : Callback Queue에 있는 콜백들을 Call Stack 에 올려서 실행
Call Stack 이 비어있는 경우에만 Event Loop는 콜스택에 콜백 큐의 로직들을 올려 실행
이런 도움들을 받아서 비동기작업을 처리한다. (처리부분은 https://tristy.tistory.com/51 에서 그림으로 자세히 볼 수 있음)
function foo() {
console.log("1");
}
function foo2() {
console.log("2");
}
foo();
setTimeout(function () {
console.log("3");
}, 2000);
foo2();foo() Call stack에서 차례대로 진행함
setTimeout 함수를 호출함, 비동기 함수이기 때문에 WebAPI에서 처리한다.
foo2()는 setTimeout과 상관없이 Call stack으로 들어감
setTimeout의 시간이 지난 뒤 콜백 함수를 Callback Queue로 보낸다
Event Loop는 Callback Queue에 있는 콜백 함수를 Call stack으로 보내기 위해서 Call stack이 비어있는지 검사
-> Call stack이 작업중이라면 블럭킹 된다
비어있다면 Callback Queue에 있던 setTimeout을 Call stack으로 보내서 처리