async, await가 무엇인가요?

async와 await는 JavaScript에서 비동기 코드를 보다 간편하고 동기적으로 작성할 수 있도록 하는 문법적인 기능입니다. async 함수 내에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다.

async 함수

async 함수:
async 함수는 비동기적인 작업을 수행하고, Promise를 반환하는 함수입니다. async 키워드를 함수 앞에 붙여서 함수를 선언합니다. async 함수 내에서는 await 키워드를 사용하여 Promise가 처리되기를 기다리거나, 다른 async 함수를 호출할 수 있습니다.

async function fetchData() {
  // 비동기 작업 수행
  const data = await fetchSomeData(); // Promise의 처리를 기다림
  return data;
}

fetchData()
  .then(function(data) {
    console.log('Data:', data);
  })
  .catch(function(error) {
    console.error('Error:', error);
  });

위의 예제에서 fetchData 함수는 async 함수로 선언되어 있습니다. await 키워드는 fetchSomeData 함수가 반환하는 Promise가 처리될 때까지 기다립니다. 그 후에는 비동기 작업의 결과를 반환합니다.

await 키워드

await 키워드:
await 키워드는 async 함수 내에서만 사용될 수 있으며, Promise가 처리될 때까지 실행을 일시 중지합니다. 이를 통해 비동기 작업을 동기적인 코드 스타일로 작성할 수 있습니다.

async function fetchData() {
  const data1 = await fetchSomeData1();
  const data2 = await fetchSomeData2();
  return [data1, data2];
}

위의 예제에서 fetchData 함수는 await 키워드를 사용하여 fetchSomeData1 함수와 fetchSomeData2 함수가 처리될 때까지 기다립니다. 그 후에는 두 개의 데이터를 배열로 반환합니다.

async와 await를 사용하면 콜백이나 Promise 체인을 사용하는 것보다 코드를 보다 선언적이고 동기적으로 작성할 수 있습니다. 이를 통해 비동기 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.