Promise에도 동기는 있다!

Promise 코드

let a = 2;

const p = new Promise(
  // 여기부터
  (resolve, reject) => {
    console.log("제일 먼저");
    setTimeout(() => {
      a = 5;
      console.log(a);
      resolve(a);
    }, 0);
  }
  //  여기까지 동기
);

console.log("딴짓");

p.then((result) => {
  console.log("result", result);
});

출력 결과

코드 분석

-step1

let a = 2;

const p = new Promise(
  // 여기부터
  (resolve, reject) => {
    console.log("제일 먼저");
    setTimeout(() => {
      a = 5;
      console.log(a);
      resolve(a);
    }, 0);
  }
  //  여기까지 동기
);

• 선언 지도
  • 선언 지도에는 anonymous -> a(2), p(Promise)가 선언됨
• p
  • new Promise 부분에서 주석으로 표시된 부분은 동기 부분이며, 바로 호출이 된다.
    • 호출하는 부분이 없는데 호출이 된다, 이런 경우는 외우는 수밖에 없다.
  • 동기 부분이 실행되고 p에 대입되고 다음으로 넘어간다.
  • 따라서 호출 스택에 (resolve, reject) => {}, log(제일 먼저), setTimeout가 순서대로 들어간다.
• 호출 스택
  • setTimeout은 비동기라서 백그라운드로 넘어간다.
  • "제일 먼저"가 출력된다.
  • promise는 바로 실행되는데 나중에 결괏값을 사용할 수 있기에 실행을 마친다.

-step2(동기 부분 끝)

console.log("딴짓");

p.then((result) => {
  console.log("result", result);
});

• 호출 스택
  • log(딴짓), p.then()이 순서대로 들어간다.
  • "딴짓"이 출력된다.
  • p.then()은 promise라서 백그라운드로 들어간다.
  • anonymous까지 실행되면 호출 스택이 비게된다.

-step3(비동기 부분 시작)

• 백그라운드
  • 백그라운드에 있는 Time(0) fn은 0초가 지나면 태스크 큐의 매크로(M)로 간다.
• 태스크 큐의 매크로(M)
  • fn이 태스크 큐의 매크로(M)으로 들어왔다.
• 호출 스택
  • 이벤트 루프에서 호출 스택이 비어있는 것을 확인하면, 태스크 큐의 매크로에 있는 fn을 호출 스택으로 보낸다.
  • 선언 지도에 있는 a는 5로 바뀐다.
  • log(a), resolve(a)가 순서대로 호출 스택에 들어간다.
  • a는 5니까 5가 출력된다.
  • resolve(a)가 실행되면, 백그라운드에 있는 p.then() fn이 태스크 큐로 이동한다.

-step4

• 백그라운드
  • p.then() fn은 promise니까 태스크 큐의 마이크로(m)로 이동한다.
• 태스크 큐의 마이크로(m)
  • p는 a(5)를 반환하여 태스크 큐의 마이크로(m)에 담긴다.
• 호출 스택
  • 이벤트 루프가 호출 스택이 빈 것을 확인하고 태스크 큐의 마이크로(m)에 있는 p(5)를 호출 스택으로 보낸다.
  • p(5), log(result)가 순서대로 호출 스택에 쌓인다.
  • "result 5"가 출력된다.
  • p(5)도 실행되면 호출 스택은 빈다.

-step5

• 호출 스택, 백그라운드, 태스크 큐가 모두 비면 JS의 실행은 종료된다.

-출처

https://www.youtube.com/watch?v=Z30cbiPLVfE&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=14