소개

자바스크립트에서 비동기 작업을 다루기 위해 사용되는 async/await은 간편하고 가독성이 좋은 코드를 작성할 수 있도록 도와줍니다. 이번 글에서는 async/await의 기본 개념을 살펴보고, 예시 코드를 통해 코드 리뷰를 진행해보겠습니다.

async/await란?

async/await은 자바스크립트에서 비동기 작업을 처리하기 위한 키워드입니다. async는 함수 안에서 비동기 작업을 위해 사용되며, 해당 함수는 항상 promise를 반환합니다. await는 promise가 처리될 때까지 함수의 실행을 일시 중단합니다.

예를 들어, 다음과 같은 비동기 함수가 있다고 가정해봅시다.

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

위의 코드에서 fetch 함수는 비동기적으로 데이터를 가져오는 작업을 수행하며, await 키워드를 사용하여 response를 기다립니다. 그리고나서 response를 json 형식으로 파싱하여 data 변수에 할당합니다. 마지막으로 data를 반환합니다.

예시 코드 리뷰

이제 async/await을 사용한 예시 코드를 살펴보고 리뷰해보겠습니다.

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.log('Error:', error);
    throw new Error('Failed to fetch data');
  }
}

function displayData(data) {
  // 데이터를 화면에 출력하는 로직
}

async function main() {
  try {
    const url = 'https://api.example.com/data';
    const data = await fetchData(url);
    displayData(data);
  } catch (error) {
    console.log('Error:', error);
  }
}

main();

위의 예시 코드는 fetchData 함수를 통해 데이터를 가져오고, displayData 함수를 통해 데이터를 화면에 출력하는 간단한 예시입니다. main 함수에서는 fetchData를 호출하여 데이터를 가져온 뒤, displayData 함수를 호출하여 화면에 데이터를 출력합니다. 이전에 살펴봤던 async/await의 개념을 적절히 활용하고, 예외 처리도 적절하게 해주는 좋은 코드입니다.

결론

자바스크립트 async/await은 비동기 작업을 처리할 때 보다 직관적이고 가독성이 좋은 코드를 작성할 수 있게 해줍니다. 예시 코드 리뷰를 통해 async/await의 활용법을 알아보았지만, 실제로는 더 복잡한 상황에서 사용될 수 있습니다. 개발자는 async/await를 적절히 활용하여 비동기 작업을 효율적으로 다루는 것이 중요합니다.