자바스크립트에서 비동기 작업을 처리하는 데에는 여러 가지 방법이 있습니다. 그 중에서도 ES6부터 추가된 제너레이터(Generators)와 ES8에서 추가된 async/await 두 가지 방법에 대해 알아보겠습니다.

제너레이터(Generators)

제너레이터는 함수의 실행을 일시적으로 멈추고 재개할 수 있는 기능을 제공합니다. function*과 yield 키워드를 사용하여 제너레이터 함수를 정의할 수 있습니다. 예를 들어, 다음과 같이 제너레이터 함수를 선언할 수 있습니다.

function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

위의 함수는 호출될 때 마다 1, 2, 3 순서대로 값을 반환하며, yield 키워드를 사용하여 값을 반환하고 함수의 실행을 멈출 수 있습니다.

async/await

async와 await는 Promise를 사용하는 비동기 코드를 더 간결하고 명확하게 작성할 수 있는 구문입니다. async 키워드를 이용하여 함수를 비동기 함수로 선언하고, 함수 내부에서 await 키워드를 사용하여 Promise가 처리될 때까지 기다릴 수 있습니다.

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

위의 예제에서 fetchData 함수는 비동기 함수로 선언되었으며, await 키워드를 사용하여 Promise가 처리될 때까지 기다립니다.

제너레이터와 async/await의 활용

제너레이터와 async/await를 함께 사용하면, 비동기 작업을 보다 유연하게 다룰 수 있습니다. 예를 들어, 아래와 같이 제너레이터 함수와 async/await를 조합하여 사용할 수 있습니다.

function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

async function asyncGenerator() {
  for await (let value of generatorFunction()) {
    console.log(value);
  }
}

위의 예제에서 asyncGenerator 함수는 for-await-of 구문을 이용하여 제너레이터 함수의 값을 비동기적으로 처리합니다.

제너레이터와 async/await는 각각의 특징을 활용하여 비동기 코드를 간편하게 작성할 수 있도록 도와줍니다. 이러한 기능을 익히고 활용하면, 복잡한 비동기 코드를 보다 쉽게 관리할 수 있습니다.

참고 자료

• ECMAScript 6: Generators
• MDN Web Docs: async function
• MDN Web Docs: await

위의 내용을 통해, 제너레이터와 async/await를 이용하여 자바스크립트의 비동기 처리를 쉽게 다룰 수 있다는 점에 대해 알아보았습니다.