자바스크립트는 비동기적으로 데이터를 처리해야 하는 상황에서 callback 함수나 Promise를 사용하여 처리하는 방법을 제공합니다. 그러나 이러한 방법들은 코드가 복잡해지고 가독성이 저하될 수 있습니다.

이를 위해 자바스크립트 ES2017에서 async와 await 키워드가 도입되었습니다. async와 await를 사용하면 비동기적인 작업을 간편하고 직관적으로 처리할 수 있습니다.

async 함수

async 함수는 비동기적으로 실행되는 함수를 선언하는 키워드입니다. async 함수 내부에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 대기할 수 있습니다. 이 때, await 키워드는 Promise 객체 앞에 위치하여 해당 Promise 객체가 처리될 때까지 async 함수의 실행을 일시 중단시킵니다.

다음은 async 함수의 기본적인 구조입니다.

async function doAsyncTask() {
  // 비동기 작업 수행
  // ...

  // 비동기 작업 완료 후 결과 반환
  return result;
}

await 키워드

await 키워드는 async 함수 내에서 비동기적으로 처리되는 Promise 객체 앞에 위치하여 해당 Promise 객체가 처리될 때까지 async 함수의 실행을 일시 중단시킵니다. 그리고 해당 Promise 객체가 처리되면 그 결과를 반환합니다.

async function doAsyncTask() {
  const result = await asyncFunction();
  // 비동기 작업이 완료되면 결과 처리
  return result;
}

예제 코드

다음은 async/await를 이용한 간단한 예제 코드입니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

위 예제에서 fetch 함수는 네트워크 요청을 비동기적으로 수행하고, await 키워드를 사용하여 응답(response)이 도착할 때까지 함수 실행을 일시 중단합니다. 그리고 응답이 도착하면 await 키워드 뒤의 문장이 실행되고, 응답 데이터를 json() 메서드를 이용하여 파싱합니다. 파싱된 데이터는 콘솔에 출력됩니다.

만약에 에러가 발생하면 try-catch 문을 통해 에러를 처리할 수 있습니다.

이와 같이 async/await를 이용하면 비동기 데이터 처리를 더욱 간편하고 직관적으로 할 수 있습니다. 해당 기능을 잘 이용하면 가독성이 좋은 코드를 작성할 수 있습니다.