await를 사용하면 결국 동기와 다른 이유가 뭔가요?

안녕하세요, 인프런 AI 인턴입니다.

yeonsul123님의 질문에 대해 비슷한 주제를 다룬 기존 답변을 찾았습니다. 질문의 핵심은 “비동기 함수를 await 키워드와 함께 사용하면 동기와 어떤 차이가 있는지, 그리고 어떤 경우에 await가 중요한 역할을 하는지”에 대한 궁금증입니다.

이와 관련하여, “비동기를 동기로 처리하는 이유”라는 질문에서 이정환 지식공유자께서 자세히 답변해 주셨습니다. 이 답변에서는 자바스크립트의 몇 가지 내장 비동기 함수(ex. fetch, setTimeout, setInterval 등)와 이들이 왜 Promise를 반환하여 비동기적으로 동작하는지 설명합니다. 또한, 어떤 상황에서 비동기 함수의 결과값을 바로 이용하고 싶을 때, async 및 await 키워드를 사용하여 이를 어떻게 동기적으로 처리할 수 있는지 구체적인 예시와 함께 설명하고 있습니다.

await 키워드의 중요한 역할 중 하나는 비동기 처리 중인 데이터가 필요한 다음 작업을 위해 해당 데이터의 처리가 완료될 때까지 기다릴 수 있게 함으로써, 코드의 실행 순서를 직관적이고 명확하게 관리할 수 있게 하는 것입니다. 이러한 점에서 동기화 처리 방식과는 다르게, 개발자가 비동기적인 프로세스를 효율적으로 제어할 수 있는 수단을 제공합니다.

또한, async/await 질문 있습니다.에서도 비슷한 주제에 대한 설명이 있습니다. 이 답변에서는 async 함수 내의 await 사용에 대한 궁금증이 해결됩니다. async 내에서의 await 사용은 해당 비동기 함수가 결과를 반환할 때까지 기다리는 것을 목적으로 하며, 이는 내부에서만 동기적으로 실행되는 것을 의미합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

안녕하세요 이정환입니다.

await을 사용하면 비동기로 작동하는 함수의 결과값을 마치 동기로 작동하는 함수처럼 받아보는게 가능합니다.

따라서 API를 호출하여 서버에서 데이터를 불러온다던가 하는 비동기 작업을 마치 동기처럼 작동시킬 수 있어서

코드의 흐름을 순차적으로 읽도록 만들 수 있어, 가독성을 크게 향상시킬 수 있다는 장점을 가질 수 있습니다.

다음은 그 예시입니다.

async function fetchData() {
  try {
    // 서버로부터 데이터를 요청하고 응답을 기다림
    const response = await fetch('https://api.example.com/data');
    // 응답 본문을 JSON 형태로 변환하고 기다림
    const data = await response.json();
    // 데이터 출력
    console.log(data);
  } catch (error) {
    // 에러 처리
    console.error('데이터를 불러오는데 실패했습니다:', error);
  }
}

// fetchData 함수 호출
fetchData();

만약 await을 사용하지 않고 위 코드와 동일한 기능을 하는 코드를 작성해야 한다면 다음과 같이 작성해야 합니다.

function fetchData() {
  // 서버로부터 데이터를 요청하고, Promise 객체 반환
  fetch('https://api.example.com/data')
    .then(response => {
      // 응답을 JSON 형태로 변환하는 Promise 반환
      return response.json();
    })
    .then(data => {
      // 변환된 데이터 출력
      console.log(data);
    })
    .catch(error => {
      // 에러 처리
      console.error('데이터를 불러오는데 실패했습니다:', error);
    });
}

// fetchData 함수 호출
fetchData();