async/await 은 뭘까?

앞서 동기/비동기 와 javascript의 promise에 대해서 포스팅 했다.

하지만 지금 내가 짜고 있는 코드는 대부분 비동기 처리를 할 때 async/await을 사용한다. 그럼 이 또한 promise처럼 javascript에서 비동기 처리를 위한 안배라고 생각할 수 있을 텐데, 정확히 async/await이 왜 만들어 졌고 어떻게 사용되는지 알아보도록 하자.

async/await은 뭘까?

async/await는 비동기 처리 방식 중 하나로, Promise를 사용한 코드를 더욱 간결하고 직관적으로 작성할 수 있게 해주는 문법이다.

도입 배경

기존에 비동기 처리를 위해 사용되던 콜백 함수나 Promise는 처리 과정을 이해하기 어려웠고, 코드가 복잡해지는 문제가 있었다. 이러한 문제를 해결하기 위해 async/await가 도입되었다. async/await는 코드를 간결하게 작성할 수 있고, 직관적인 처리 과정을 보여주어 코드의 가독성을 향상시킬 수 있다.

콜백의 기준에서 Promise또한 충분히 간결하고 가독성이 좋은 코드라고 볼 수는 있다. 하지만 메소드 체이닝으로 인한 .then의 연속적인 사용에 의해 가독이 떨어지도 코드가 지저분해 지는 경우가 발생했다. 이를 보완하고자 나온 문법으로 ES8부터 async/await이 도입되었다.

동작원리

async/await는 기본적으로 Promise 객체를 기반으로 동작한다. 처음에 내가 경험한 promise의 시각적 만남은 이로 인해 발생했었다.

async 함수에서 await 키워드를 사용하면, 그 뒤에 오는 Promise 객체가 처리될 때까지 함수의 실행이 일시 중지된다. 이 때, Promise 객체의 처리 결과가 성공이면 해당 결과를, 실패이면 예외를 throw합니다. 이렇게 처리된 결과는 async 함수의 반환 값으로 사용된다.

사용방법

async/await는 함수의 앞에 async 키워드를 붙여서 사용한다. async 함수 안에서는 await 키워드를 사용하여 Promise 객체를 처리한다. await 키워드는 Promise 객체가 처리될 때까지 함수의 실행을 일시 중지시키고, Promise 객체의 처리 결과를 반환한다.

async function fetchData() {
  const data = await fetch('https://example.com/data');
  return data.json();
}

위 코드에서는 fetchData 함수가 async로 정의되어 있다. 함수 안에서는 fetch 메서드를 호출하고, 그 결과로 반환된 Promise 객체를 await 키워드를 사용하여 처리한다. 이 때, fetch 메서드의 처리가 끝나기 전까지는 함수의 실행이 일시 중지된다. Promise 객체가 처리된 후에는 처리 결과를 반환하게 된다.

장단점

도입배경에서 설명한 promise의 단점을 보완하기 위해서 만들어진 문법이지만 마냥 다 좋기만 한 것은 아니다.

장점

기존에 사용하던 비동기처리 방식인 콜백함수나 promise에 비해서 아래와 같은 장점들을 가진다.

• 코드의 가독성이 높아진다.
  이전에 콜백 함수를 중첩해서 사용했는데 async/await을 사용하면 비동기 처리가 필요한 부분에서만 'await'키워드를 사용하면 되므로 코드가 간결해지고 알아보기 쉬워진다.
  

• 에러 처리가 간단해진다.
  'try-catch'구문의 중복된 사용을 피할 수 있다.

• 병렬 처리가 쉬워진다.
  async/await를 사용하면 비동기 처리를 순차적으로 수행할 수 있기 때문에, 병렬 처리가 쉬워진다. 여러 개의 Promise 객체를 생성하고, Promise.all() 메소드를 사용해 병렬 처리할 수 있다.

const asyncFunction = async () => {
  const results = await Promise.all([
    promiseFunction(1, 2000),
    promiseFunction(2, 4000),
    promiseFunction(3, 1000),
  ]);
  console.log(results);
}

asyncFunction();

• 콜백 함수를 사용하지 않아도 된다.

• Promise 객체보다 직관적으로 이해할 수 있다.

단점

• Promise 객체가 가진 일부 기능을 사용할 수 없는 경우가 있다.
  async/await는 Promise 객체를 기반으로 동작하기 때문에, Promise 객체가 가진 일부 기능을 사용할 수 없는 경우가 생길 수 있다.
  이런 경우를 해결하기 위해서는 어쩔 수 없지만 Promise 객체를 직접 사용해야 한다.

• Promise를 사용한 코드보다 속도가 느릴 수 있다.
  이는 async/await는 Promise 객체를 기반으로 동작하기 때문에, Promise 객체를 생성하고, Promise 객체의 처리 과정을 관리하는 추가적인 작업이 필요하기 때문이다.

• await을 사용할 수 있는 함수는 async 함수 내에서만 사용할 수 있다.
  await은 async 함수 내에서만 사용할 수 있습니다. 따라서, 일반 함수에서는 사용할 수 없습니다.

• 오버헤드가 있을 수 있다.
  async/await은 내부적으로 Promise를 사용하기 때문에, Promise가 가진 단점과 마찬가지로 오버헤드가 있을 수 있다. 따라서, 많은 양의 비동기 작업이 필요한 경우에는 성능에 영향을 미칠 수 있다.

• 에러 처리가 필요하다.
  단점이라기 보다는 사용시 주의점에 해당한다. async/await을 사용하면 코드의 가독성은 향상되지만, 에러 처리를 위해 try-catch문이 필요하다. 그렇지 않으면 예기치 않은 에러가 발생할 수 있다.

참고자료(출처)
비동기처리 (async / await) 개념 & 문법 💯 정리
5 Tips and Thoughts on Async / Await Functions
동기, 비동기란? (+Promise, async/await 개념)