[JavaScript] Async / Await

Async / Await

async/await는 JavaScript에서 비동기 작업으로 처리하는 최신 문법을 말합니다.

• async : 함수를 비동기로 선언한다.
• await :  Promise의 이행(성공) 혹은 거절(실패)을 기다린다.

async/await는 Promise 기반으로 동작하며, CallBack이나 then Chain 대신 동기 코드처럼 작성할 수 있도록 도와준다.

(즉, CallBack 지옥에서 벗어나게 해준다.)

Async 함수

Async 로 선언된 함수는 항상 promise를 반환한다.

• 만약 반환 값이 Promise가 아니라면, 반환 값을 자동으로 Promise로 변환한다.

sync function example() {
  return 'Hello, async!'; // Promise.resolve('Hello, async!')
}

example().then((result) => console.log(result)); // 출력: Hello, async!

Await 키워드

Await는 Promise가 해결될때까지 기다린다.

• await는 반드시 async 함수 내부에서만 사용할 수 있다.

async function example() {
  const result = await new Promise((resolve) => setTimeout(() => resolve('Done!'), 1000));
  console.log(result); // 1초 후 출력: Done!
}

example();

---

Async / Await 와 기존 비동기 처리 방식의 비교

CallBack 방식

장점

• 특정 로직을 캡슐화하여 코드의 재사용성을 높일 수 있다.
• 함수의 유연성이 크다.

문제점

• 콜백이 중첩되면서 가독성이 떨어지는 CallBack Hell이 발생한다.

setTimeout(() => {
  console.log('콜백 실행');
  setTimeout(() => {
    console.log('중첩된 콜백 실행');
  }, 1000);
}, 1000);

---

Promise 방식

장점

• then Chain을 사용해 CallBack Hell을 완화한다.

문제점

• then Chain이 길어지면 여전히 가독성이 떨어진다.

new Promise((resolve) => {
  setTimeout(() => resolve('첫 번째 Promise 완료'), 1000);
})
  .then((result) => {
    console.log(result);
    return new Promise((resolve) => setTimeout(() => resolve('두 번째 Promise 완료'), 1000));
  })
  .then((result) => console.log(result));

---

Async / Await 방식

장점

• 코드가 동기식으로 읽혀서 가독성이 좋아진다.

단점

• 외부 라이브러리를 사용한다.
• 위의 방식들보다 좀 더 무겁다.

async function process() {
  const step1 = await new Promise((resolve) =>
    setTimeout(() => resolve('첫 번째 단계 완료'), 1000)
  );
  console.log(step1);

  const step2 = await new Promise((resolve) =>
    setTimeout(() => resolve('두 번째 단계 완료'), 1000)
  );
  console.log(step2);
}

process();

---

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!