코드를 순차적으로 실행하면서 만약 실행이 끝나기까지 오래걸리는 함수를 만나면 그 동작이 다 끝날때까지 다음 코드를 실행하지 않는다.
🧐What's the problem? 위와 같이 오래 걸리지 않는 동작을 수행할때는 문제가 없다. 하지만 용량이 높은 사진을 다운받는 작업과 같이 시간이 오래 걸리는 작업을 할 때에도 동기적으로만 작동한다면 문제가 생긴다. 사진 파일이 다운되는동안, 사용자는 다른 서비스를 이용할 수가 없는것이다. ex> 네트워크 요청, 암호화 작업, 파일 다운로드 등
자바스크립트의 비동기
비동기 서버에 요청을 보냈을때 응답이 왔는지 안왔는지에 상관없이 다음동작을 실행할 수 있게 하는것.
🔫 하지만 자바스크립트는 기본적으로 동기적 언어이면서도 비동기적 처리를 할수 있다 🔫
이러한 것들이 가능하게 해주는것은 자바스크립트의 런타임때문이다.
런타임이란?
프로그래밍 언어가 구동되는 환경 크롬, Node.js등의 각종 브라우저 자바스크립트 엔진, Web API, 콜백 큐, 이벤트 루프로 구성
1️⃣자바스크립트 엔진, 2️⃣Web API, 3️⃣callback queue 그리고 4️⃣이벤트루프
1️⃣자바스크립트 엔진
기본적으로 자바스크립트 V8엔진(크롬기준)은 콜스택이라는 곳에 코드의 실행순서를 저장한다.
콜스택 함수의 실행순서가 담기는 공간 콜스택에 쌓였다가 나중에 들어온 것부터 실행하고, 종료됨
힙 할당된 메모리들이 저장되는 공간
콜스택과 힙에 관한 더 자세한 내용을 글을 따로 쓰겠다. 여기서는 비동기가 실행가능한 환경에 대해서 더 자세하게 적어보겠다.
2️⃣Web API
DOM과 같이 기본적으로 브라우저에서 제공하는 API
기본적으로 브라우저에는 webAPIs라는 것이 있다. 여기에서 자바스크립트 엔진안의 콜스택이 무언가일을 처리하는것과 동시에 다른 작업을 할수가 있다. 예를 들어서 setTimeout()이라는 함수를 실행하고 3000을 적으면, 이 함수는 web API에서 3초를 보내고 나서 콜스택으로 옮겨진다. 그래서 자바스크립트안의 콜스택에서 작업이 이루어짐과 동시에 webAPIs안에서도 시간을 세는일을 하는 것이다.
ex> setTimeout, DOM, AJAX(HTTP 요청)
3️⃣callback queue (각종 큐들)
Web API 결과값을 쌓아두는 큐
webAPIs에서 setTimeOut()의 타이머가 종료되고 나면, 이 함수는 콜백큐로 보내진다. 이러한 함수들은 콜백큐에 순차적으로 쌓이고, 이벤트루프에 의해서 감시당한다. 콜백큐에서 대기하다가 자바스크립트 엔진의 콜스택이 모두 비워지면 이벤트루프에 의해서 콜스택으로 보내진다.
콜백큐 비동기 함수들은 콜백큐로 들어간다. 콜스택이 모두 비워지면 그때, 콜백큐에 있던 함수들이 콜스택으로 들어간다. 자바스크립트가 비동기작업을 할수있는 이유
