JavaScript Async/Await 함수 완벽 가이드

Promise 객체는 비동기 작업의 최종 완료(또는 실패) 상태와 그 결과값을 나타냅니다. Async/Await 함수와 연산자는 바로 이 Promise를 기반으로 동작합니다.

Async/Await를 활용하면 내부적으로는 비동기 작업을 수행하면서도, 코드 겉모습은 마치 동기식처럼 자연스럽게 작성할 수 있다는 큰 장점이 있습니다.

Promise 반환 예제

예를 들어, 2초 후에 값 100으로 이행(resolve)되는 Promise를 반환하는 비동기 함수가 있다고 가정해 보겠습니다.

// 2초 후에 100으로 이행되는 Promise
function getHundred() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(100);
        }, 2000);
    });
}

콜백 방식의 한계

이 함수를 다른 함수 안에서 사용하면서 반환값을 기다려야 한다면, 전통적인 콜백 방식에서는 다음과 같이 작성해야 합니다.

function useGetHundred() {
    getHundred().then((value) => {
        console.log(value);
    })
}

하지만 이 방식은 반환된 데이터를 처리하기 위해 불필요하게 콜백 함수를 추가로 만들어야 하며, 로직이 복잡해지면 콜백이 중첩되는 소위 '콜백 지옥(callback hell)' 문제도 발생할 수 있습니다.

Async/Await로 개선하기

대신 async/await를 사용하면 훨씬 간결하고 가독성 높은 코드로 바꿀 수 있습니다.

// async 함수 선언. 호출 시 Promise를 반환하며,
// 함수 내부에서는 await 키워드로 비동기 호출을 동기식처럼 처리할 수 있음
async function useGetHundredAsync() {
    // getHundred Promise가 이행될 때까지 기다린 후 값을 value에 저장
    let value = await getHundred();
    console.log(value)
}

실행 결과

100

핵심 정리

• async: 함수 앞에 붙여 해당 함수가 항상 Promise를 반환하도록 만듭니다.
• await: Promise가 이행될 때까지 실행을 일시 중지하고, 이행된 값을 반환받습니다. 단, async 함수 내부에서만 사용할 수 있습니다.
• await를 사용하면 .then() 체인 없이도 비동기 결과를 변수에 직접 할당할 수 있어 코드 흐름이 훨씬 명확해집니다.