자바스크립트 제너레이터는 ES6부터 도입된 기능으로, 함수의 실행을 멈추고 다시 시작할 수 있는 독특한 기능을 제공합니다. 이를 통해 비동기 작업을 보다 간편하게 처리하고, 이터레이션 프로토콜을 활용하여 데이터를 순회하는 등의 다양한 기능을 구현할 수 있습니다.

제너레이터 함수 생성하기

제너레이터 함수는 function* 키워드를 사용하여 생성됩니다. 일반적인 함수와는 다르게, 제너레이터 함수는 값을 반환하는 것이 아닌 이터레이터 객체를 반환합니다.

function* myGenerator() {
  yield '첫 번째 값';
  yield '두 번째 값';
  yield '세 번째 값';
}

const generator = myGenerator(); // 제너레이터 함수를 호출하여 제너레이터 객체를 생성

위의 예시에서 myGenerator 함수는 제너레이터 함수로, yield 키워드를 사용하여 값을 생성합니다. 호출된 myGenerator 함수는 이터레이터 객체인 generator를 반환합니다.

제너레이터 함수 실행하기

제너레이터 함수를 실행하기 위해서는 next() 메서드를 사용합니다. next() 메서드는 제너레이터 함수의 실행을 한 단계씩 전진시키며, 해당 단계에서 생성된 값을 반환합니다.

console.log(generator.next()); // { value: '첫 번째 값', done: false }
console.log(generator.next()); // { value: '두 번째 값', done: false }
console.log(generator.next()); // { value: '세 번째 값', done: false }
console.log(generator.next()); // { value: undefined, done: true }

위의 예시에서 next() 메서드를 호출하면, 제너레이터 함수가 실행되며 yield 키워드에서 멈춥니다. next() 메서드의 반환값은 yield 키워드로 생성된 값을 포함한 객체({ value: ... , done: ... })입니다. done 값이 true가 되면 제너레이터 함수의 실행이 종료됩니다.

제너레이터 함수와 비동기 작업

제너레이터 함수는 비동기 작업을 보다 간편하게 처리할 수 있는 장점이 있습니다. yield 키워드를 통해 함수의 실행을 멈추고 외부에서 값을 전달하는 것이 가능하기 때문입니다.

function* fetchData() {
  try {
    const data = yield fetch('https://api.example.com/data');
    console.log(data);
  } catch (error) {
    console.error('데이터를 가져오는 중 에러가 발생했습니다.', error);
  }
}

const generator = fetchData();
const promise = generator.next().value; // 비동기 작업인 fetch 함수 호출

promise.then(response => generator.next(response.json()).value)
  .then(data => generator.next(data));

위의 예시에서 fetchData 제너레이터 함수 내부에서 yield 키워드를 사용하여 fetch 함수를 호출하고, 비동기 작업을 처리합니다. yield 키워드 뒤에 실행되는 fetch 함수는 프로미스를 반환하므로, 프로미스 체인을 통해 값을 전달하고 다음 작업을 실행합니다.

결론

자바스크립트 제너레이터는 함수의 실행을 제어하기 위한 강력한 기능으로, 비동기 작업 처리나 이터레이터 프로토콜을 활용한 데이터 순회 등에 유용하게 사용될 수 있습니다. 제너레이터를 활용하면 코드의 가독성과 유지보수성을 향상시킬 수 있으며, 복잡한 비동기 로직을 보다 쉽게 다룰 수 있습니다.