[JavaScript] 비동기 처리: `async/await` vs `Promise` 반환 비교

JavaScript에서 비동기 처리를 할 때 흔히 선택하는 방식은 async/await와 Promise를 직접 반환하는 방법입니다. 두 방식은 내부적으로는 같은 Promise 기반이지만, 사용성과 가독성에서 차이가 있습니다. 이번 글에서는 각각의 특징과 차이를 살펴보겠습니다.

---

1. async/await 방식

async 키워드를 함수 앞에 붙이면 함수는 항상 Promise를 반환합니다. 함수 내부에서는 await 키워드를 사용해 Promise가 처리될 때까지 기다릴 수 있습니다.

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

fetchData().then(result => console.log(result));

장점

• 가독성 향상: 동기식 코드처럼 작성 가능, 중첩된 then() 없이 처리 가능
• 에러 처리 용이: try/catch로 동기 코드와 비슷하게 예외 처리 가능

단점

• 즉시 실행 불가: await는 반드시 async 함수 내부에서만 사용 가능
• 불필요한 await 남용 가능: 이미 Promise를 반환하는 경우 await 없이 바로 반환해도 됨

---

2. Promise 직접 반환 방식

Promise를 직접 반환하면 then()과 catch()를 이용해 비동기 결과를 처리합니다.

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json());
}

fetchData().then(result => console.log(result));

장점

• 즉시 반환 가능: async/await 없이 바로 Promise 반환
• 체이닝 가능: 여러 Promise를 연결하여 비동기 처리 가능

단점

• 가독성 저하: 복잡한 비동기 로직에서는 중첩된 then() 때문에 코드가 길어질 수 있음
• 에러 처리 번거로움: 모든 단계마다 catch()를 걸어야 하거나, 최종적으로 모아 처리해야 함

---

3. 비교 요약

특징	async/await	Promise 반환
가독성	높음 (동기식 코드처럼 작성)	낮음 (중첩될수록 복잡)
에러 처리	try/catch로 직관적	catch 체이닝 필요
즉시 반환	가능하나 내부 await 필요	바로 Promise 반환 가능
체이닝	가능, 그러나 await 사용 시 단순화	직접 then() 체이닝 필요

---

정리

• 단순 비동기 함수: 이미 Promise를 반환하는 경우 async/await 없이 바로 반환해도 충분합니다.
• 복잡한 로직이나 연속적인 비동기 처리: async/await가 코드 가독성을 높이고, 예외 처리도 간단하게 만들어 줍니다.

async/await는 읽기 쉽고 유지보수에 유리하고, Promise 직접 반환은 단순 함수 체이닝에 적합하다고 볼 수 있습니다.