async & await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주는 일종의 키워드라고 할 수 있습니다. 내부의 then()메소드가 await로 대체된다고 보면 되겠습니다.

간단한 예제를 살펴보도록 하겠습니다

async function foo() {
  await 1
}

위 코드는 아래와 같습니다.

function foo(){
  return Promise.resolve(1).then(() => undefined) 
}

여기서 async가 Promise.resolve(1)를 await가 .then()을 비슷하게 사용을 할 수있다고 볼 수 있습니다.

단, await키워드의 경우 async function에서만 사용을 할 수 있습니다.

실습

이전 포스팅에서 작성한 starbucks코드를 async/await를 사용해 리팩토링 해보도록 하겠습니다.

기존

const starbucks = function (coffeeName) {
  return new Promise((resolve, reject) => {
    if (coffeeName === '아메리카노') {
      resolve('아메리카노 한잔입니다.');
    } else {
      reject('아메리카노는 없습니다.')
    }
  })
}

starbucks('아메리')
.then((res) => console.log(res))
.catch((rej) => console.log(rej))
.finally(() => console.log('감사합니다'));

리팩토링

async function americano() {
  const result = await starbucks('아메리');
  console.log(result);
}

americano()//아메리카노는 없습니다.

then과 catch를 함께 사용하고 싶은 경우 아래와 같이 작성을 할 수 있습니다.

async function americano(someDrink) {
  try {
    const result = await starbucks(someDrink);

    return result;
  } catch (error) {
    console.log('error')
  } finally {
    console.log('감사합니다')
  }
}

americano('아메리')

이렇게 Promise를 async/await를 통해 간단하게 작성을 할 수 있습니다. async/await는 함수 스코프 내에서 자유롭게 코드를 작성할 수 있다는 장점이 있어 더 깔끔하게 코드를 작성할 수 있습니다.

마무리하며

무조건 async/await가 좋다고 할 수만은 없습니다. 이렇게 한번 코드를 작성하게 되면 이렇게 await키워드를 한 번 사용한 경우 americano함수가 사용되는 곳에는 무조건 await를 붙여줘야하기 때문입니다.

asyn function getDrink() {
  await americano('아메리') 
}

따라서 사용을 하면서 상황에 맞게 찾아 사용을 하시길 권장드립니다.

참고자료

---

MDN
캡틴판교
change.velog
모던튜토리얼