제너레이터(Generator) 함수는 yield 키워드를 사용하여 결과를 순차적으로 생성하는 특별한 함수입니다. 일반 함수와 달리, 제너레이터는 값을 반환한 후에도 자신의 실행 상태(state)를 그대로 유지합니다. 따라서 다음에 다시 호출되면 처음부터 시작하는 것이 아니라, 마지막으로 실행된 yield 지점에서 바로 이어서 실행을 재개할 수 있습니다.
또한 제너레이터가 호출될 때마다 호출자(caller)에게 하나의 값을 되돌려주며, next() 메서드를 통해 이러한 값을 순차적으로 받아올 수 있습니다.
제너레이터 함수의 주요 특징
- 상태 유지: 함수 실행이 중단된 위치와 내부 변수 값을 기억합니다.
- 지연 평가(Lazy Evaluation): 값이 필요한 시점에 하나씩 생성하므로 메모리를 효율적으로 사용할 수 있습니다.
- 무한 시퀀스 처리: 무한대의 데이터 흐름도 손쉽게 다룰 수 있습니다.
자바스크립트 제너레이터 예제 코드
다음은 버튼을 클릭할 때마다 제너레이터 함수를 호출하여 결과를 화면에 출력하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Generator</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Generator</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위의 버튼을 클릭하면 제너레이터 함수가 호출되어 결과가 생성됩니다.
</h3>
<script>
let sampleEle = document.querySelector(".sample");
function* generate(num) {
yield 2 * num;
yield 3 * num;
yield 4 * num;
yield 5 * num;
}
let Gen = generate(8);
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML += Gen.next().value + "<br>";
sampleEle.innerHTML += Gen.next().value + "<br>";
sampleEle.innerHTML += Gen.next().value + "<br>";
sampleEle.innerHTML += Gen.next().value + "<br>";
});
</script>
</body>
</html>코드 설명
위 예제에서 핵심 부분을 살펴보겠습니다.
function* generate(num): 함수 이름 앞에 별표(*)를 붙여 제너레이터 함수임을 선언합니다.yield 2 * num;등 : 각 yield 문은 하나의 값을 생성하고 실행을 잠시 멈춥니다.generate(8): 제너레이터 객체를 생성하며, 이 시점에는 아직 함수 본문이 실행되지 않습니다.Gen.next().value: next() 메서드를 호출하면 다음 yield 문까지 실행되고, 그 결과값이 value 속성으로 반환됩니다.
인자로 8을 전달했기 때문에, 각 yield 표현식은 차례대로 16, 24, 32, 40을 생성하게 됩니다.
실행 결과
페이지를 처음 열었을 때의 화면입니다.
'CLICK HERE' 버튼을 클릭하면 제너레이터가 생성한 값들이 순서대로 출력됩니다.
마무리
제너레이터 함수는 반복 작업, 비동기 흐름 제어, 대용량 데이터 처리 등에서 매우 유용하게 활용됩니다. yield 키워드를 통해 실행 흐름을 자유롭게 멈추고 재개할 수 있다는 점이 가장 큰 장점이며, 이를 잘 이해하면 더욱 유연하고 효율적인 자바스크립트 코드를 작성할 수 있습니다.