JAVASCRIPT 이벤트 루프

정리

자바스크립트는 싱글쓰레드기반의 언어이고 하나의 호출스택을 가집니다.
하나의 호출스택은 하나의 동작을 처리하는데 어떻게 여러 동작을 동시에 처리하는지 생각해볼 필요가 있습니다.
정확히는 동시에 처리하는 것'처럼' 보인다고 할 수 있습니다.
자바스크립트는 이벤트루프라는 알고리즘을 기반으로 Non Blocking I/O를 지원합니다.
비동기 함수들은 태스크 큐에 등록이 되고 콜스택이 비워진 후에야 실행이 됩니다.
콜스택이 비어있는지, 태스크 큐에 태스크가 있는지 확인하고 콜스택이 비어있으면 태스크를 콜스택에 넣는 형태를 이벤트루프라고 합니다.

---

---

---

---

---

---

---

이벤트 루프에 관해 정리를 해보겠다.

Nodejs 백엔드 면접 질문으로 자주 등장하는 키워드인데 명확히 정리가 안되었던 것 같음.

---

호출 스택

function first() {
  second();
  console.log(1);
}
function second() {
  third();
  console.log(2);
}
function third() {
  console.log(3);
}
first();
third();

위의 출력: 3 2 1 3

실행 컨텍스트의 원리로 분석해보자
first(); 가 실행 되었을 때의 호출 스택에는

|- third----|
|- second-|
|- first-----|

아래에서 위로 호출된 순서대로 컨텍스트가 쌓인다.
위에서 아래로 실행된다. (LIFO 스택 구조)

제일 아래 컨텍스트가 실행되고 지워지면 실행완료 (사실 전역 컨텍스트가 존재함)

그 후에 third(); 가 스택에 들어가게 된다.

Uncaught RangeError: Maximum call stack size exceeded

호출 스택이 가득 찰 때 나오는 에러로 약 만개 정도로 생각하고 개발하자

---

이벤트 루프

자바스크립트가 싱글쓰레드라고 불리는이유 : 메인쓰레드인 이벤트 루프가 싱글쓰레드이기 때문이다.

console.log('a')
setTimeout(() => console.log('b'), 1000);
setTimeout(() => console.log('c'), 0);
console.log('d');

위 코드의 동작과정을 통해 이벤트 루프를 설명해봄.

출력: a d c b

1. 호출 스택 기준으로는

   • a 출력, setTimeout B, setTimeout C, d 출력 순서로 실행된다.

2. a와 d 는 그대로 호출 스택대로 console.log 출력이 되지만 setTimeout 은 콜백함수를 백그라운드 로 보냅니다.

3. 백그라운드 는 1000ms, 0ms 뒤에 태스크 큐(queue)로 콜백함수를 보냅니다.

4. 이벤트 루프는 대기하고 있다가 호출 스택이 비워지면 태스크 큐(queue)에서 함수를 호출 스택에 밀어 올립니다.

   • 이 때 호출 스택이 비워져 있지않다면 밀어올리지 못한다.(setTimeout이 정확하지 않을 수 있는 이유)

위의 Uncaught RangeError: Maximum call stack size exceeded 에러 같은 경우도

백그라운드를 이용해 해결 할 수도있다.

콜백함수 사용하는 것들은 백그라운드를 사용하는 경우가 많다.