Javascript-12 (async, await)

저번 시간에 이어서 시간과의 싸움!!
오늘은 바로 async, await에 대한 정리를 해보려고 한다.

내가 어려웠던 부분은 왜 await이라는 부분이 필요한가였다.
뭔가 await을 꼭 해야하나... 꼭 기다려야하는건가? 라는 생각이 들었는데 꽤나 중요했고, 항상 그렇듯 알고나니 별것 아니었다.

---

그 전에 Promise를 기본적으로 알고 있으면 조금 더 쉽기 때문에 다음에 Promise에 대해서 다시 한번 정리를 해야겠다.

우선 Promise를 이용해서 날짜를 뽑아 볼 수 있다.

function delayP(sec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(new Date().toISOString());
    }, sec * 1000);
  });
}

이렇게 하면 delayP(sec)에 인자를 숫자로 넣어주면 곱하기 1000 즉, 1을 넣으면 1초가 된다.

그리고

function myFunc() {
  return "func";
}

async function myAsync() {
  return "async";
}

console.log(myFunc()); // func
console.log(myAsync()); // Promise {<resolve>: "async"}

신기하게도 async를 넣고 log를 찍어보면 Promise라고 나온다.
그 말은 즉, async에서도 then을 사용 할 수 있다는 뜻이다.

function myFunc() {
  return "func";
}

async function myAsync() {
  return "async";
}

myAsync().then((result) => {
  console.log(result)
})

이런 식으로 사용이 가능하다.
여기에서 .then(result)의 result는 바로 myAsync()에서 return되는 async를 의미한다.

자! 이제 내가 제일 헷갈려했던 await이다.
await을 왜 사용하는가?
이런 코드가 있다고 해보자.

function delayP(sec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(new Date().toISOString());
    }, sec * 1000);
  });
}

async function myAsync() {
  delayP(3).then((time) => {
    console.log(time);
  });
  return "async";
}

그러면 log가 찍히는 순서는 async, 그 다음 3초 후에 new Date()가 찍힐 것이다.
그런데 나는 반대로 delayP()가 실행 된 후 나중에 return 받기를 원한다면?
이럴 때 사용 할 수 있는 것이 await이다.

function delayP(sec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(new Date().toISOString());
    }, sec * 1000);
  });
}

async function myAsync() {
  await delayP(3);
  return "async";
}

이렇게 await을 붙여주게 되면 async가 먼저 return 되는 것이 아니라 delayP(3)를 통해 newDate()가 먼저 실행되고 이후되고 이후 async가 return 된다!

---

1. Promise나 async나 결국 promise를 return 하기 때문에 사용법은 비슷하다.
2. await 뒤에는 일반함수를 붙여도 실행된다
3. 둘다 하나를 버려야하는 것이 아니라, 잘 조합해서 사용하면 된다.