[JS] callback, Promise, Async Await 차이점 한눈에 보기🧐

읽기 전에 동기, 비동기 + 타이머 관련API와
Promise와 Async, Await 설명부터 보고 오면 좋다.

---

아래 callback, Promise, Async Await는
모두 같은 동작을 하는 코드이다.
(어떻게 동작하는지만 보고 나머지 함수 이름들은 신경X)

🧽 callback

🧼 setTimeout을 가진 delay함수

const delay = (wait, callback) => {
  setTimeout(callback, wait);
} 

1️⃣ delay함수를 가지고 callback을 구현

function runCallback() {
  resetTitle();
  playVideo();

  delay(1000, () => {
    pauseVideo();
    displayTitle();

    delay(500, () => {
      highlightTitle();

      delay(2000, resetTitle);
    });
  });
}

---

🧽 Promise

🧼 new Promise 안에 setTimeout을 가진 sleep함수

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(resolve, wait);
  });
};

🧼 물론 화살표 함수로 resolve의 인자에 값을 넣어줄 수 있다.

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("hello");
    }, wait);
  });
};

1️⃣ sleep함수를 가지고 promise then구현1

function runPromise() {
  resetTitle();
  playVideo();

  sleep(1000)
    .then(() => {
      pauseVideo();
      displayTitle();
      return sleep(500);
    })
    .then(() => {
      highlightTitle();
      return sleep(2000);
    })
    .then(() => {
      resetTitle();
    });
}

2️⃣ sleep함수를 가지고 promise then구현2
sleep.bind(null, 500)에서 null은 복사한 함수를 의미한다.
❓bind가 뭔가요?
함수의 위치에 따라서 동적으로 변하는 this를
같은 함수에서 내가 원하는 값의 this로 고정하고 싶을 때 사용한다.
간단하게 말하자면 this를 바꿔줄 때 사용한다고 보면 된다.

function runPromise() {
  resetTitle();
  playVideo();

  sleep(1000)
    .then(() => {
      pauseVideo();
      displayTitle();
    })
    .then(sleep.bind(null, 500))
    .then(highlightTitle)
    .then(sleep.bind(null, 2000))
    .then(resetTitle);
}

---

🧽 Async / Await

1️⃣ 아까 만들어두었던 sleep함수를 가지고 Async / Await를 구현

async function runAsync() {
  resetTitle();
  playVideo();

  await sleep(1000);
  pauseVideo();
  displayTitle();

  await sleep(500);
  highlightTitle();

  await sleep(2000);
  resetTitle();
}