ES6(ECMAScript 2015) – 반복자와 생성기 – 1 – 생성기(Generator)

ES6(ECMAScript 2015) - 객체 리터럴 확장 - 2 - 프로토타입 축약
ES6(ECMAScript 2015) – 반복자와 생성기 – 1 – 생성기(Generator)

ES6(ECMAScript 2015) – 반복자와 생성기 – 1 – 생성기(Generator)

생성기(Generator)란?

생성기(Generator)는 ES6(ECMAScript 2015)에서 도입된 기능으로, 함수의 실행을 일시적으로 중지하고 나중에 다시 시작할 수 있는 반복적인 작업을 수행할 수 있게 해줍니다. 생성기는 함수 내부에서 여러 번의 값을 반환할 수 있으며, 이전 상태를 유지하면서 다음 값을 반환하는 등의 유연한 제어가 가능합니다.

생성기의 동작 원리

생성기는 일반 함수와는 다르게 function* 키워드를 사용하여 선언합니다. 생성기 함수 내부에서는 yield 키워드를 사용하여 값을 반환하고 일시적으로 실행을 중지합니다. 이후 생성기 함수를 호출하면, 중지된 부분부터 다시 실행되며, yield 키워드를 만나면 다시 일시 중지됩니다. 이런 방식으로 생성기는 필요한 만큼 값을 생성하고 제어할 수 있습니다.

간단한 예시를 통해 생성기의 동작 원리를 이해해보겠습니다. 아래는 1부터 5까지의 숫자를 반환하는 생성기 함수입니다.

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
}

위 생성기 함수를 호출하여 값을 가져오는 방법은 아래와 같습니다.

const generator = numberGenerator(); // 생성기를 호출하여 생성기 객체를 반환합니다.
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: 4, done: false }
console.log(generator.next()); // { value: 5, done: false }
console.log(generator.next()); // { value: undefined, done: true }

numberGenerator() 함수를 호출하면 생성기 객체가 반환됩니다. 이 객체는 next() 메서드를 통해 값을 생성하고 반환합니다. next() 메서드를 호출할 때마다 yield 키워드를 만날 때까지 실행이 진행되며, yield 키워드에서 반환된 값은 value 속성으로 반환됩니다. 마지막으로 모든 값을 반환한 후에는 { value: undefined, done: true }와 같이 done 속성이 true로 설정됩니다.

생성기의 활용 예시

생성기는 반복 작업을 효율적으로 처리하기 위해 사용될 수 있습니다. 예를 들어, 1부터 시작하여 피보나치 수열의 값을 계속해서 생성하는 생성기 함수를 만들어보겠습니다.

function* fibonacci() {
  let current = 1;
  let next = 1;

  while (true) {
    yield current;
    [current, next] = [next, current + next];
  }
}

위 생성기 함수를 사용하면, 필요한 만큼의 피보나치 수열 값을 생성할 수 있습니다. 아래는 값을 생성하고 출력하는 예시입니다.

const fibonacciGenerator = fibonacci();
console.log(fibonacciGenerator.next().value); // 1
console.log(fibonacciGenerator.next().value); // 1
console.log(fibonacciGenerator.next().value); // 2
console.log(fibonacciGenerator.next().value); // 3
console.log(fibonacciGenerator.next().value); // 5
// ...

생성기를 활용하면 필요한 만큼의 값을 생성하고 사용할 수 있으므로, 메모리 사용과 성능 면에서 유리할 수 있습니다.

생성기의 주의할 점

생성기를 사용할 때 주의해야 할 몇 가지 점이 있습니다.

첫째, 생성기 함수 내부에서 return 문을 사용하지 않아야 합니다. 생성기 함수는 yield 키워드를 통해 값을 반환하며, return 문은 생성기 함수의 실행을 종료시키기 때문에 의도한 대로 작동하지 않을 수 있습니다.

둘째, 생성기 객체에 대해 순회 작업을 수행할 때는 주의해야 합니다. 일반적인 배열이나 객체와 달리 생성기 객체는 한 번 순회한 후에는 다시 순회할 수 없습니다. 따라서 생성기 객체를 순회해야 할 경우, 필요한 값들을 변수에 저장해두거나, 배열로 변환하여 사용하는 등의 방법을 고려해야 합니다.

셋째, 생성기의 무한 루프에 주의해야 합니다. 생성기 함수 내부에서 무한 루프를 사용할 경우, yield 키워드를 통해 값을 반환해야만 중지될 수 있습니다. 그렇지 않으면 무한한 반복으로 인해 프로그램이 멈추게 됩니다.

마무리

ES6(ECMAScript 2015)에서 도입된 생성기(Generator)는 함수의 실행을 일시 중지하고 나중에 다시 시작할 수 있는 반복 작업을 효율적으로 수행하기 위한 기능입니다. function* 키워드를 사용하여 생성기 함수를 선언하고, yield 키워드를 통해 값을 반환하며 실행을 중지할 수 있습니다. 생성기는 반복 작업, 비동기 처리, 무한 시퀀스 생성 등 다양한 상황에서 유용하게 사용될 수 있습니다.

생성기를 사용할 때에는 return 문을 주의하고, 생성기 객체의 순회를 고려해야 합니다. 또한, 무한 루프에 주의하여 의도치 않은 프로그램 종료를 방지해야 합니다.

생성기는 자바스크립트의 강력한 기능 중 하나이며, 유연하고 효율적인 코드 작성을 위해 적극적으로 활용해보시기 바랍니다. ES6(ECMAScript 2015)의 생성기와 반복자 기능은 현대 자바스크립트 개발에서 필수적인 요소로 자리 잡았습니다.

답글 남기기