자바스크립트에서 비동기 작업을 처리할 때 setTimeout 함수는 자주 사용됩니다. 이 함수는 특정 시간 이후에 콜백 함수를 실행하는데 사용되며, 비동기적인 작업을 모델링하는데 유용합니다. 그러나 setTimeout 함수를 사용하여 콜백 기반 비동기 코드를 작성하는 것은 가독성과 유지보수에 어려움을 초래할 수 있습니다.

여기서 async/await와 setTimeout 함수를 함께 사용하여 비동기 작업을 처리하는 방법을 살펴보겠습니다. async/await는 자바스크립트의 비동기 처리를 위한 문법적인 편의성을 제공하며, 코드의 가독성과 유지보수성을 향상시킵니다.

await와 함께 setTimeout 사용하기

setTimeout 함수를 async/await와 함께 사용하려면 다음과 같이 코드를 작성할 수 있습니다:

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function myAsyncFunction() {
  console.log('작업 시작');
  await delay(2000);
  console.log('2초 후에 실행됨');
}

myAsyncFunction();

위의 예제에서 delay 함수는 지정된 시간(ms) 이후에 resolve를 호출하여 Promise를 완료하는 프라미스를 반환합니다. 이 delay 함수를 await와 함께 사용하여 비동기 작업을 지연시킬 수 있습니다.

myAsyncFunction은 async 함수로 정의되어 있으며, await 키워드와 함께 delay 함수를 호출하여 2초 동안 작업을 지연시킵니다. 그리고 delay가 완료된 후에 다음 문을 실행합니다.

에러 처리하기

async/await를 사용하면 예외 처리도 간편해집니다. 앞서 작성한 코드를 수정하여 에러 처리를 해보겠습니다:

function delay(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (ms <= 0) {
        reject(new Error('유효하지 않은 지연 시간입니다.'));
      } else {
        resolve();
      }
    }, ms);
  });
}

async function myAsyncFunction() {
  try {
    console.log('작업 시작');
    await delay(-2000);
    console.log('2초 후에 실행됨');
  } catch (error) {
    console.error(error.message);
  }
}

myAsyncFunction();

delay 함수는 음수 값이 주어졌을 때 reject를 호출하여 Promise를 거부합니다. myAsyncFunction에서는 await 표현식을 try...catch 문으로 감싸 에러를 처리하도록 수정되었습니다.

결론

자바스크립트의 async/await와 setTimeout 함수를 함께 사용하면 비동기 작업을 동기적으로 처리함과 동시에 코드를 더 명료하게 작성할 수 있습니다. async/await는 비동기 처리에 대한 문법적인 편의성을 제공하며, setTimeout 함수와 함께 사용할 때 코드의 가독성을 높이고 유지보수를 용이하게 해줍니다.