[F-lab대비] 자바스크립트의 비동기적 처리

동기? 비동기?

동기(Synchronous) : 특정 일을 수행 완료 후 다음을 수행하는 것.

비동기 (Asynchronous) : 특정 일을 수행하는 도중에도 다른것도 같이 진행하면서 수행.

자바스크립트는 기본적으로 싱글스레드 방식으로 동작한다. 고로 한번에 한가지 일만 수행한다.

그럼 싱글스레드인 자바스크립트가 비동기가 가능한 이유는 무엇일까?

답은 "이벤트 루프" 덕분이다.

이벤트 루프는 브라우저에 내장되어 있는 기능 중 하나이고, 이 기능 덕분에 자바스크립트는 비동기 작업이 가능하다.

위 사진은 자바스크립트의 런타임이다.

자바스크립트 엔진은 메모리힙과 콜스택으로 이뤄져있고

브라우저 환경에 Web APIs, Callback Queue, Event Loop이 있다.

Memory Heap : 메모리 할당이 일어나는 곳
Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳

js환경도 알아보았으니 일반적으로 코드의 실행 순서를 알아보면서 비동기적 처리가 어떻게 이뤄지는지도 알아보자.

js동작방식

console.log("시작");

setTimeout(function(){
	console.log("중간");
}, 3000);

console.log("끝");

위에 간단한 코드의 실행결과를 예상해보자.

"시작", "끝", "중간" 이라고 생각이 된다.

그렇다면 실행순서을 분석해보자.

1. Call Stack에 anonymous가 쌓인다.
2. Call Stack에 console.log("시작")이 쌓인다.
3. Console에 "시작"출력, Call Stack에 console.log("시작")이 빠진다.
4. setTimeout함수가 콜스택에 쌓인다.
5. setTimeout함수가 실행되면서 WebAPI로 넘어간다.
6. console.log("끝")이 콜스택에 쌓인다.
7. Console에 "끝"이 실행되고 Call Stack에 console.log("끝")이 빠진다.
8. anonymous가 Call Stack에 빠진다.
9. WebAPI에 있는 setTimeout가 3초뒤에 Callback Queue에 넘겨준다.
10. 이벤트 루프는 콜스택이 비어있다는 것을 인지, Callback Queue에 있는 setTimeout을 콜스택에 쌓는다.
11. setTimeout안의 console.log("중간")을 Call Stack에 쌓는다.
12. Console에 "중간"이 출력되면서 console.log("중간")이 Call Stack에서 빠진다ㅏ.
13. setTimeout도 콜스택에 빠진다.

코드실행은 이처럼 실행된다.

정리

싱글 스레드인 자바스크립트가 비동기적 처리가 가능한 이유는 브라우저 내장기능인 "이벤트 루프"가 있기에 가능하다.

이후 공부할 것은 자바스크립트에서의 비동기 프로그래밍 방법에대해서 알아보자