[Javascript] 자바스크립트에서의 비동기(asynchronous) 동작

https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf 

기본적으로 자바스크립트는 단일 스레드이며 동기적(synchronous)이다.

동기적이라는 것은 어떠한 작업이 실행되고 있다면 다른 작업은 멈춘 상태에서 기다리는 것을 말한다.

 

---

비동기 동작

비동기적으로 동작하는 것도 필요하다. 

비동기적이라는 것은 어떠한 요청을 보내고 이 요청이 처리되는 것을 끝날때까지 기다리는 것이 아니라 바로 다음 작업이 실행되는 것을 말한다.

 

console.log('Hello');

setTimeout(function hi(){
	console.log('async');
    },3000);

console.log('Bye');

먼저 , console.log('Hello')가 실행이 되고, 콜 스택에 쌓였다가 콘솔에 Hello가 출력된다.

출력 후에는 스택에서 사라지고 , 스택에는 setTimeout이 들어간다. 

 

setTimeout()은 브라우저에서 제공하는 WEB API이다. 즉, 자바스크립트가 실행되는 런타임 환경에서 별도의 API가 존재한다는 것이다. 

 

WEB API에서 카운트다운을 하게되고, 스택에서 setTimeout은 사라진다.

 

그리고 console.log('Bye')가 콜 스택에 추가되고, 콘솔에 출력후 스택에서 사라진다.

 

타임아웃이 되고, WEB API는 hi함수(callback)을 callback queue에 넣는다.

 

이제 이벤트 루프가 동작할 차례이다.

이벤트 루프(event loop)는 call stack이 비어있다면, callback queue의 앞에서부터 보면서 stack에 쌓아 실행될수 있게 한다. 

 

즉, 현재 스택이 비어있고 , callback queue에는 hi()가 있으므로 이벤트루프는 이를 stack에 넣게 된다.

비로소 콘솔 창에 async가 출력된다.