📌 자바스크립트 동작 원리
자바스크립트는 기본적으로 싱글 스레드(Single Thread) 기반 언어이기 때문에, 콜 스택이 하나이다. 따라서 한 번에 하나의 작업만 처리할 수 있다. 다른 작업을 수행하려면 현재 수행중인 작업이 끝날때까지 기다려야 하는 문제점이 있다.
그렇기 때문에, 오랜 시간이 걸리는 작업들은 백그라운드에서 처리하고 간단하게 처리할 수 있는 작업들만 콜 스택에서 처리한다면 효율적으로 처리가 가능하다.
✅ Call Stack
자바스크립트를 한 줄씩 읽어가며 코드가 순서대로 실행될 수 있도록 보장해주는 데이터 구조 (후입 선출(LIFO, Last-In-First-Out) 구조)
만약 스택을 초과하게 된다면?
➡️ 무한 루프를 도는 코드를 돌리면 Maximum call stack size 에러가 발생
Call Stack은 정해진 스택 사이즈가 존재하고, 하나씩 쌓이기 때문에 정해진 용량을 초과하게 되면 에러 발생. 이것을 Stack Overflow라고 부른다.
자바스크립트는 어떻게 비동기 작업을 수행하나요?
➡️ Web APIs & Event Loop & Task Queue 의 도움을 받아 비동기 처리를 할 수 있다.
✅ Web APIs
Web APIs는 브라우저에서 자체 제공하는 API로, 비동기 작업등을 실행할 수 있는 DOM, Ajax, setTimeout 등이 있다.
setTimeout(), setInterval() 같은 함수는 자바스크립트 자체에서 실행할 수 없고, 브라우저에서 제공하는 Web API의 도움을 받아서 실행할 수 있다.
Call Stack에서 실행된 비동기 함수는 Web API를 통해 호출하고, Web API는 콜백 함수를 Task Queue에 push한다.
✅ Task Queue & Event Loop
태스크 큐에는 비동기 작업들이 일시적으로 저장된다.
예를 들어, setTimeout 에서 타어머가 완료 되고 실행되는 함수, addEventListener 에서 click 이벤트가 발생했을 때 실행되는 함수 등이 저장된다.
콜 스택에 있는 내용이 모두 비워지면 (Web API의 도움을 받지 않아도 되는 기본 동작들이 모두 실행된 후에) 태스크 큐에 쌓여 있던 내용들은 콜 스택으로 와서 하나씩 실행된다.
이때, 콜 스택이 비었는지를 확인하고 태스크 큐에 있는 코드를 콜 스택으로 옮기는 게 이벤트 루프이다.
✴️ 예시
function foo() {
console.log(1);
}
function foo2() {
console.log(2);
}
foo();
setTimeout(() => {
console.log(3);
}, 2000)
foo2();-
foo()함수가 콜 스택에 쌓인다.
-
foo()함수 안에 있는console.log(1)이 콜 스택에 쌓인다.
-
콘솔에 1이 출력되고, 콜 스택에서 실행된 코드
console.log(1),foo()는 지워진다.
-
setTimeOut()이 콜 스택에 쌓인다.
-
setTimeOut()은 비동기 함수이므로 자바스크립트 내부에서 처리할 수 없다. Web API로 보낸다. 그리고 그다음 함수인foo2()함수를 콜 스택에 쌓인다.
-
foo2()함수 안에 있는console.log(2)이 콜 스택에 쌓인다.
-
콘솔에 2가 출력되고, 콜 스택에서 실행된 코드
console.log(2),foo2()는 지워진다.
-
자바스크립트의 기본 동작은 끝났다. (=콜 스택이 비었음)
Web API에 처리한 비동기 함수setTimeout()의 콜백 함수를 태스크 큐로 보낸다.
이때, 콜 스택에 있던
foo2()함수가 종료되고 나서야 Web API를 처리하는 게 아니고setTimeOut()이 Web API로 넘어간 시점부터 처리되고 있는 것이다. 즉, 콜 스택에서는foo2()함수를 처리하고 있었고, Web API에서는setTimeOut()을 2초 동안 처리하고 있었다. -
이벤트 루프는 콜 스택이 비어있는 것을 확인하고 태스크 큐에 대기하고 있는
setTimeout() 함수의 콜백함수를 콜 스택으로 보내서 처리한다.
-
콘솔에 3이 출력되고, 콜 스택에서 실행된 코드
console.log(3)은 지워진다.
