async와 await 이해하기

async와 await는 자바스크립트에서 시간이 걸리는 작업을 처리할 때 사용하는 도구예요. 이를 이해하기 쉽게 피자 배달 상황을 예로 들어 설명해볼게요.

피자 주문 예시로 async와 await 설명하기

피자를 주문하는 상황을 상상해 봅시다. 피자를 주문하고, 피자가 배달되기까지 시간이 걸리죠. 그동안 우리는 다른 일을 할 수 있거나, 피자가 올 때까지 그냥 기다릴 수도 있어요.

1. async는 "피자를 주문해놓고, 배달이 오기 전에 다른 일을 할 준비가 되어 있어"라고 생각하면 돼요. 즉, 피자가 오기를 기다리면서도 다른 일을 할 수 있는 거죠.
2. await는 "피자가 배달될 때까지 아무 일도 하지 않고 잠시 기다릴게"라는 뜻이에요. 피자가 오면 그제야 다음 일을 할 수 있어요.

코드로 보면:

async function orderPizza() {
  console.log("피자를 주문했어요!");  // 피자 주문

  const pizza = await waitForPizza();  // 피자가 도착할 때까지 기다림

  console.log("피자가 도착했어요!", pizza);  // 피자가 도착하면 그걸 출력
}

orderPizza();  // 피자 주문 시작

코드 설명:

1. async function orderPizza()는 피자를 주문하고 기다릴 준비가 되어 있는 함수예요. 이 함수는 "비동기 함수"라고 불려요. 피자를 주문하고 나면 바로 피자가 배달되지 않기 때문에, async는 시간이 걸릴 일을 처리할 수 있게 해줍니다.
2. await waitForPizza()는 피자가 배달될 때까지 기다리라는 뜻이에요. await은 피자가 도착할 때까지 다음 작업을 하지 않고 잠시 멈추게 합니다. 피자가 도착하면 그제야 pizza라는 변수에 저장하고 다음 일을 이어서 할 수 있어요. 이처럼 await는 피자 배달과 같은 시간이 걸리는 작업이 끝날 때까지 기다리게 만들고, 작업이 끝나면 그 결과를 받아서 다음 일을 처리하는 방식이에요.

요약:

• async는 함수가 비동기로 동작할 준비가 되어 있다는 뜻이에요. 즉, 시간이 걸리는 작업이 있어도 기다릴 수 있다는 의미죠.
• await는 비동기 작업이 끝날 때까지 잠시 기다리는 동작을 합니다. "내가 기다릴게, 끝나면 다음 일을 하자"라고 말하는 것과 같아요.

일상생활과 비교하면:

피자를 주문하고 배달이 오기를 기다리는 상황에서:

• async는 피자를 기다리면서 다른 일을 할 수 있게 하는 역할을 해요. 예를 들어, 주문하고 나서 친구랑 게임을 하거나 TV를 볼 수 있는 거죠.
• await는 피자가 도착할 때까지 아무 일도 하지 않고 그냥 기다리게 만들어요. 그러다가 피자가 오면 그제야 다음 일을 하겠다는 뜻이에요.