내일배움캠프 React트랙 27일차 회고 (2022.12.07)

callstack, Single Thread 작동과정 살펴보기

자바스크립트는 단 하나의 싱글 컨텍스트 스택을 가지고 있다. 따라서 

싱글 쓰레드(Single Thread): 자바스크립트 엔진은 기본적으로 한번에 하나의 일만 처리한다. -> 동기적(직렬적)으로 실행된다.

function a() {
  for (let i = 0; i < 1000000000000000; i++);
  return 1;
}

function b() {
  return a() + 1;
}

function c() {
  return b() + 1;
}

console.log("시작했다!");
const result = c();
console.log(result);

---

콜백 비동기

자바스크립트는 기본적으로 동기적인 언어이다. 하지만, Host환경(브라우저환경이라면 WebAPI, 노드환경이라면 노드에서 제공해주는 다양한 API..)에서 제공해주는 다양한 API를 활용해 런타임에서는 멀티쓰레드환경에서  비동기적(병렬적)으로 작동할 수 있다.

 

process

1. 호스트환경에서 제공해주는 대부분의 API는 비동기적으로 작동함.
2. 호스트환경에서 제공해주는 API가 호출되면, 비동기조건(3초를 기다린다던가)이 만족된 뒤 Task Queue에 들어간다.
3. Event Loop라는 놈이 Call Stack이 비어있다면, Task Queue에 들어간 함수를 Call Stack에 넣어 실행시킨다.
   • 어떠한 함수든 Call Stack에 들어가야 실행됨을 알 수 있음

function execute() {
  console.log("1");
  setTimeout(() => {
    console.log("2");
  }, 1000);
  while (true) {
    console.log(3);
  }
}
execute();

다음과 같은 함수를 실행시켜보자. 1초가 지난 뒤 console.log('2')라는 녀석이 Task Queue에 들어가있긴하지만, 여전히

while문이 실행되고있는 중이므로 Call Stack이 비어있지않은 상태이므로 console.log('2')는 1초가 되었음에도 실행되지 않는다.