자바스크립트 비동기 이해하기 - (4.1) Async & Await 알아보기

이번 글에서는 Promise를 좀 더 간단하고 읽기 쉽게 작성할 수 있도록 도와주는 Async & Await 문법에 대해 알아보겠습니다.

 

✅ Async란?

async 키워드는 비동기 함수를 선언할 때 사용하는 키워드입니다.
이 키워드를 함수 앞에 붙이면, 해당 함수는 무조건 Promise를 반환하는 함수가 됩니다.

 

예를 들어,

async function getUser() {
    return "홍길동";
}

const user = getUser();
console.log(user);

 

이 코드를 실행하면 출력 결과는 다음과 같습니다

 

Promise { '홍길동' }

 

즉, "홍길동"이라는 값이 Promise.resolve("홍길동")으로 자동 감싸져 반환되는 것이죠.

then()을 통해 결과를 확인해보면,

 

user.then((name) => console.log(name)); // 홍길동

 

홍길동이라는 결과를 정상적으로 확인할 수 있습니다.

 

 

✅ async 함수는 기존 프로미스를 그대로 반환할 수도 있습니다

만약 async 함수 안에서 이미 Promise를 리턴하는 코드가 있다면,
그 Promise는 다시 감싸지지 않고 그대로 반환됩니다.

async function getData() {
    return fetch("https://example.com");
}

 

위의 예시에서는 fetch() 자체가 Promise를 반환하므로, getData() 역시 동일한 Promise를 그대로 반환합니다.

 

 

 

✅ await의 필요성

await는 비동기 함수의 실행 결과(Promise)를 기다리는 역할을 합니다.

다음 예제를 보시죠

 

function networkRequest() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("데이터를 받아왔습니다");
            resolve();
        }, 2000);
    });
}

async function getUser() {
    networkRequest(); // ❌ 기다리지 않음!
    return "홍길동";
}

getUser().then((name) => console.log(name));

 

출력 결과는 다음과 같습니다

홍길동
데이터를 받아왔습니다

 

왜 이런 순서로 출력될까요?

그 이유는 networkRequest() 함수가 비동기로 동작하는데 await 없이 호출되었기 때문에,
기다리지 않고 바로 "홍길동"을 리턴하기 때문입니다.

 

✅ await을 사용하여 순서를 제어하기

await을 사용하면 비동기 작업이 완료될 때까지 기다린 뒤 다음 작업을 실행할 수 있습니다.

async function getUser() {
    await networkRequest(); // ✅ 이 줄이 끝날 때까지 기다림
    return "홍길동";
}

getUser().then((name) => console.log(name));

 

출력 결과

 

데이터를 받아왔습니다
홍길동

 

이처럼 await 덕분에 networkRequest()가 끝난 뒤에 "홍길동"이 리턴됩니다.

---

✅ 결론 정리

• async 키워드를 붙인 함수는 항상 Promise를 반환합니다.
• await은 비동기 함수 내에서만 사용할 수 있는 키워드로,
  Promise가 처리될 때까지 기다린 후 다음 코드를 실행합니다.
• await 덕분에 콜백 지옥 없이, 마치 동기적인 코드처럼 비동기 흐름을 제어할 수 있습니다.

---

📌 다음 글에서는 async/await을 활용한 예외 처리 방법과 함께, 실제 실무에서 어떤 식으로 사용하는지 더 자세히 살펴보겠습니다.