[JavaScript] 27. 비동기 작업 처리하기 / Async & Await

서회정

Feb 04, 2026

[JavaScript] 27. 비동기 작업 처리하기 / Async & Await

Contents

1. Async 2. Await

1. Async

💡

어떤 함수를 비동기 함수로 만들어주며 함수가 프로미스를 반환할 수 있도록 도와주는 키워드이다


// async
// 어떤 함수를 비동기 함수로 만들어주는 키워드
// 함수가 프로미스를 반환하도록 도와주는 키워드

async function getData() {
  return {
    name: "서회정",
    id: "clubnerdy",
  };
}

console.log(getData());

만일, 애초에 프로미스를 반환하고 있는 비동기 함수라면, 이 async는 별 다른 일을 하지 않고 프로미스가 반환되도록 내버려둔다.


async function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: "서회정",
        id: "clubnerdy",
      });
    }, 1000);
  });
}

console.log(getData());

2. Await

💡

async 함수 내부에서만 사용 가능하며 비동기 함수가 다 처리되길 기다리는 역할을 한다


// await
// async 함수 내부에서만 사용 가능한 키워드로
// 비동기 함수가 다 처리되길 기다리는 역할을 한다.

function printData() {
  getData().then((result) => {
    console.log(result);
  });
}

printData();

저번 시간에 배웠던 then 키워드를 사용하면 이러한 형태로 코드를 구성할 수 있다.

여기서 async와 await를 사용하면 then을 굳이 사용하지 않아도 되는데 다음과 같이 코드를 수정할 수 있다.


async function printData() {
  const data = await getData();
  console.log(data);
}

printData();

getData()가 반환하는 프로미스의 비동기 작업이 종료될 때까지 기다렸다가 종료가 되면 결과값을 data라는 변수에 넣어준다. 이를 콘솔에 출력하여 같은 콘솔 출력값을 확인할 수 있다.

이렇게 async와 await를 사용하면 비동기 작업을 마치 동기 작업을 처리하듯이 보다 간결한 코드로 수행할 수 있다.