async와 await 키워드는 JavaScript에서 비동기 프로그래밍을 더욱 간결하고 읽기 쉽게 만들어주는 문법입니다. 이들은 Promises와 깊은 연관성을 가지며, 비동기 코드를 동기 코드처럼 보이게 하는 강력한 기능을 제공합니다.

async 함수

async 키워드는 함수 선언 앞에 붙여 해당 함수가 비동기 함수임을 나타냅니다. 비동기 함수는 항상 Promise 객체를 반환하며, 이 Promise는 함수의 반환 값을 resolve하거나, 함수 내에서 발생하는 에러를 reject합니다.

async function getGreeting() {
  return "안녕하세요!";
}

console.log(getGreeting()); // Promise { <fulfilled>: '안녕하세요!' }

getGreeting().then(message => {
  console.log(message); // 안녕하세요!
});

await 표현식

await 키워드는 async 함수 내에서만 사용할 수 있습니다. await은 Promise가 resolve될 때까지 함수의 실행을 일시 중지하고, Promise가 resolve되면 그 결과를 반환합니다. 만약 await이 Promise가 아닌 값을 만나면, 해당 값은 즉시 반환됩니다.

function delayExecution(message, duration) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(message);
      resolve();
    }, duration);
  });
}

async function greetUser() {
  await delayExecution("사용자 확인 중...", 1500);
  console.log("사용자 확인 완료.");
}

greetUser();
// 출력:
// 사용자 확인 중...
// 사용자 확인 완료.

await 뒤에 오는 표현식이 Promise가 아닐 경우, await은 해당 값을 즉시 반환합니다. 이 경우 비동기 작업이 수행되지 않으며, await은 단순히 값을 반환하는 역할을 합니다.

function simpleTask() {
  console.log("단순 작업 실행.");
}

async function processTask() {
  await simpleTask(); // Promise가 아니므로 즉시 반환
  console.log("작업 처리 완료.");
}

processTask();
// 출력:
// 단순 작업 실행.
// 작업 처리 완료.

async/await와 Promise의 비교

• 가독성: Promise 체이닝은 복잡한 비동기 흐름에서 코드를 읽기 어렵게 만들 수 있습니다. async/await는 비동기 코드를 동기 코드처럼 보이게 하여 가독성을 크게 향상시킵니다.
• 비동기 처리: async/await는 Promise와 마찬가지로 비동기 작업을 수행하며, 기본적으로 Non-blocking 방식으로 동작합니다.
• 함수 제어: async 함수는 내부적으로 Generator 함수와 유사하게 동작하며, await을 통해 비동기 작업의 완료를 기다립니다.
• 연결성: async 함수는 Promise와 함께 사용할 때 가장 강력한 성능을 발휘합니다. await은 Promise의 resolve 값을 직접 받을 수 있어, .then() 콜백 내에서 값을 추출하는 것보다 간결합니다.

async/await는 비동기 코드를 작성하는 방식을 혁신적으로 개선하여, 개발자가 복잡한 비동기 로직을 더욱 직관적이고 효율적으로 다룰 수 있도록 돕습니다.