자바스크립트에서 비동기 코드를 보다 명료하게 작성하고 제어하기 위해 ECMAScript 2017(ES8)에서 async와 await 키워드가 도입되었습니다. 이를 활용하면 콜백 함수나 프로미스 연쇄를 사용하지 않고도 비동기적인 작업을 보다 간편하게 처리할 수 있습니다.

async 함수

async 키워드는 함수를 비동기 함수로 만들어줍니다. 이렇게 만들어진 함수 내부에서는 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다. 아래는 async 함수의 기본 형태입니다.

async function fetchData() {
  // 비동기 작업 수행
  let result = await fetch('https://api.example.com/data');
  return result.json();
}

위 예시에서 fetchData 함수는 비동기 함수로 선언되어 있으며, fetch 메서드가 완료될 때까지 await 키워드를 사용하여 기다립니다.

await 키워드

await 키워드는 async 함수 내에서만 사용할 수 있으며, 이 키워드를 사용하면 프로미스의 처리 결과를 기다리고 그 값을 반환합니다.

async function fetchData() {
  let result = await getData();
  return result;
}

위 예시에서 getData 함수가 프로미스를 반환하는 경우, await 키워드를 사용하여 해당 프로미스가 완료될 때까지 기다립니다.

await 키워드를 사용하면 비동기적인 작업을 차단하지 않고 순차적으로 실행될 수 있습니다.

오류 처리

async/await을 사용할 때는 오류를 캐치하고 처리하는 것이 중요합니다. 이를 위해 기존의 try...catch 문을 사용하여 오류를 캐치할 수 있습니다.

async function fetchData() {
  try {
    let result = await getData();
    return result;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

위 예시에서 getData 함수 실행 중 발생한 오류를 catch 블록에서 적절히 처리할 수 있습니다.

결론

async/await 키워드를 사용하면 비동기 코드를 보다 간편하게 작성하고 흐름을 제어할 수 있습니다. 이를 통해 가독성이 높고 유지보수가 용이한 코드를 작성할 수 있습니다.

이러한 기능은 JavaScript 외에도 TypeScript와 같은 다른 JavaScript 기반 언어에서도 활용될 수 있습니다.

위의 내용은 MDN Web Docs의 async function 및 await 페이지를 참고하여 작성되었습니다.