자바스크립트 동작 원리

자바스크립트는 동기적이고 단일 스레드 언어다. 즉 한번에 하나의 작업만 진행할 수 있다.

하지만 자바스크립트의 구동 환경의 특성으로 인해 자바스크립트에서도 비동기가 일어난다.

Memory Heap - 변수와 객체의 메모리 할당을 담당하는 곳

Call Stack - 함수가 호출이 되면 쌓이는 곳. 함수가 쌓이는 순서와는 반대로 실행

Web APIs - 브라우저에서 제공하는 APIs.
자바스크립트(JavaScript) 코드를 사용하여 접근할 수 있으며 window나 element에 대한 간단한 작업에서부터 WebGL이나 Web Audio와 같은 API를 사용해 복잡한 그래픽 및 오디오 효과를 만들어내는 것까지 가능

Event Loop - call stack이 비어있을 경우 callback queue에서 함수를 꺼내 call stack에 추가하는 Loop.

Callback queue - 콜백 함수들이 대기하는 곳(FIFO 선입선출)

위 그림은 자바스크립트가 작동하는 환경으로 '코드가 실행되는 싱글스레드의 콜스택이 있는 자바스크립트 엔진 + web APIs + 콜백큐 + 이벤트 루프'이 네가지로 이루어져 있다.

 

1. 콜 스택에서 코드가 하나씩 동기적으로 순서대로 처리되는 와중에 브라우저가 제공하는 API(setTimeout)이나 네트워크 통신(ajax) 같이 시간이 오래 걸리는 코드들은 처리하지 않고 web APIs로 빼둔다.
2. 콜스택의 코드들의 작업이 모두 끝나고 지워져 콜 스택이 텅텅 비게 된다.
3. webAPIs에 모인 코드들의 작업이 끝나면 콜백함수들을 콜백큐에 넣는다.
4. 이벤트 루프가 콜백큐의 콜백함수들을 콜스택에 하나씩 넣어서 콜백함수들의 결과값을 반환한다.

---

console.log(1);
setTimeout(function(){console.log(2)},1000);
console.log(3);

위의 예제로 예를 들자면

1. 자바스크립트는 코드를 한줄 씩 실행
2. 콜 스택에 console.log(1) 코드가 실행되고 사라진다.
3. 2번째 줄인 setTimeout을 실행하는데 setTimeout함수는 자바스크립트 엔진이 처리하지않고 Web API가 처리하므로 Callback함수를 전달하고, setTimeout작업을 요청한다. 그리고 콜 스택에서 사라진다.
4. console.log(3) 코드가 실행 되고 사라진다.
이 때 주의할 점은 console.log(3)이 사라지고 WebAPIs에 있던 작업이 콜백 큐로 전달되는 것이 아니라 별개로 진행 되고 전달한다
5. 이벤트 루프는 콜 스택이 비어있음을 확인하고 콜백 큐에 있던 setTimeout 콜백 함수를 콜 스택으로 추가한다.
6. 콜백 함수가 콜 스택에서 실행되고 사라진다.