Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript function* 완벽 정리: 제너레이터(Generator) 함수란 무엇인가?

JavaScript에서 function* 선언은 제너레이터(generator) 함수를 정의할 때 사용됩니다. 제너레이터 함수는 호출되어도 즉시 실행되지 않고, 대신 Generator 객체를 반환합니다.

제너레이터 함수의 가장 큰 특징은 함수 실행 도중에 일시적으로 멈췄다가 나중에 다시 재개할 수 있다는 점입니다. 일반 함수는 한 번 실행이 시작되면 끝까지 수행되지만, 제너레이터는 yield 키워드를 만나면 실행을 중단하고 값을 반환한 뒤, 다음 호출 시 중단된 지점부터 이어서 실행합니다. 이러한 특성 덕분에 제너레이터는 코드의 흐름(flow control)을 유연하게 관리하는 데 활용됩니다.

function* 문법

제너레이터 함수는 function 키워드 뒤에 별표(*)를 붙여 정의합니다. 별표의 위치는 세 가지 방식 모두 유효하며 동작에 차이가 없습니다.

function *myFunction() {}
// 또는
function* myFunction() {}
// 또는
function*myFunction() {}

제너레이터 함수 사용 예제

아래 예제는 제너레이터 함수를 정의하고, next() 메서드를 호출할 때마다 값을 하나씩 순차적으로 꺼내오는 방식을 보여줍니다.

<html>
   <body>
      <script>
         function* display() {
            var num = 1;
            while (num < 5)
               yield num++;
         }
         var myGenerator = display();

         document.write(myGenerator.next().value);
         document.write("<br>"+myGenerator.next().value);
         document.write("<br>"+myGenerator.next().value);
         document.write("<br>"+myGenerator.next().value);
         document.write("<br>"+myGenerator.next().value);
      </script>
   </body>
</html>

실행 결과

1
2
3
4
undefined

동작 원리 살펴보기

위 코드의 실행 과정을 단계별로 설명하면 다음과 같습니다.

1. 제너레이터 생성: display()를 호출하면 함수 본문이 바로 실행되지 않고 Generator 객체만 반환됩니다.

2. next() 호출과 yield: next()가 호출될 때마다 함수가 실행되다가 yield를 만나 멈추고, 해당 값을 { value, done } 형태의 객체로 반환합니다. 위 예제에서는 .value로 값만 추출해 출력했습니다.

3. 종료 상태: 4번째 next() 호출에서 num이 5가 되어 while 조건이 거짓이 되면 함수가 종료됩니다. 이후 마지막 next() 호출은 더 이상 반환할 값이 없으므로 undefined를 출력합니다.

정리

function*로 정의된 제너레이터 함수는 yield를 통해 실행을 멈추고 재개할 수 있는 강력한 기능입니다. 반복 작업, 지연 평가(lazy evaluation), 비동기 흐름 제어 등 다양한 상황에서 유용하게 활용할 수 있으므로, 개념과 동작 원리를 잘 익혀두면 좋습니다.