Regular functions return only one, single value (or nothing).

일반 함수는 하나의 값(혹은 0개의 값)만을 반환합니다.

Generators can return ("yield") multiple values, one after another, on-demand. They work great with[iterables](info:iterable), allowing to create data streams with ease.

하지만 제너레이터(generator)를 사용하면 여러 개의 값을 필요에 따라 차례 차례 반환(yield)할 수 있습니다. 제너레이터와[iterable](info:iterable)을 함께 사용하면 손쉽게 데이터 스트림을 만들 수 있습니다.

To create a generator, we need a special syntax construct:`function*`, so-called "generator function".

제너레이터를 만들려면 '제너레이터 함수'라 불리는 특별한 문법 구조,`function*`이 필요합니다.

It looks like this:

예시:

function*generateSequence() {

}

```js run

function*generateSequence() {

return3;

}

let generator=generateSequence();

alert(generator);// [object Generator]

The main method of a generator is`next()`. When called, it runs the execution till the nearest`yield <value>` statement(`value` can be omitted, then it's`undefined`).Then the function execution pauses, and theyielded`value` is returned to the outer code.

`next()`는 제너레이터의 주요 메서드입니다.`next()`를 호출하면 가장 가까운`yield <value>`문을 만날 때까지 실행이 지속됩니다(`value`를 생략할 수도 있는데, 이런 경우엔`undefined`가 됩니다).`yield <value>`문을 만나면 실행이 멈추고 산출하고자 하는(yielded) 값인`value`가 바깥 코드에 반환됩니다.

-`value`:the yielded value.

-`done`:`true` if the function code has finished, otherwise`false`.

-`value`:산출 값

-`done`:함수 코드 실행이 끝났으면`true`, 아니라면`false`

```js run

function*generateSequence() {

alert(JSON.stringify(one));// {value: 1, done: false}

let two=generator.next();

let three=generator.next();

```smart header="`function* f(…)`or`function *f(…)`?"

Both syntaxes are correct.

```smart header="`function* f(…)`혹은`function *f(…)`?"

두 문법 맞습니다.

```js run

function*generateSequence() {

let generator=generateSequence();

for(let valueof generator) {

alert(value);// 1,then 2, then 3

alert(value);// 1,2, 3

}

```js run

function*generateSequence() {

alert(sequence);// 0, 1, 2, 3

Some time ago, in the chapter[](info:iterable) we created an iterable`range` object that returns values`from..to`.

[](info:iterable)를 다룬 챕터에서`from..to` 사이에 있는 값을 반환하는 이터러블 객체인`range`를 만들어 보았습니다.

```js run

let range= {

from:1,

to:5,

[Symbol.iterator]() {

return {

current:this.from,

last:this.to,

next() {

if (this.current<=this.last) {

return { done:false, value:this.current++ };

}else {

}

};

alert([...range]);// 1,2,3,4,5

We can use a generator function for iteration by providing it as`Symbol.iterator`.

제너레이터 함수를`Symbol.iterator`처럼 사용하면 이터레이션에 제너레이터 함수를 사용할 수 있습니다.

```js run

let range= {

from:1,

to:5,

*[Symbol.iterator]() {//a shorthand for[Symbol.iterator]: function*()

*[Symbol.iterator]() {// [Symbol.iterator]: function*()를 짧게 줄임

for(let value=this.from; value<=this.to; value++) {

yield value;

}

alert( [...range] );// 1,2,3,4,5

The variant with a generator is much more concise than the original iterable code of`range`, and keeps the same functionality.

제너레이터를 사용해 구현한 예시는 이터러블을 사용해 구현한 예시보다 더 간결하고 동일한 기능을 제공합니다.

```smart header="Generators may generate values forever"

Generatorcomposition is a special feature of generators that allows to transparently "embed" generators in each other.

제너레이터 컴포지션(generatorcomposition) is a special feature of generators that allows to transparently "embed" generators in each other.

function*generateSequence(start,end) {

for (let i= start; i<= end; i++)yield i;

}

-first, digits`0..9` (with character codes 48..57),

-처음엔 숫자`0`부터`9`를 생성합니다(문자 코드 48부터 57까지),

In a regular function, to combine results from multiple other functions, we call them, store the results, and then join at the end.

일반 함수를 사용해 원하는 기능을 구현하려면 여러개의 함수를 만들고 그 호출 결과를 어딘가에 저장한 후 다시 그 결과들을 조합해야 할 겁니다.

For generators, there's a special`yield*` syntax to "embed" (compose) one generator into another.

하지만 제너레이터의 특수 문법`yield*`를 사용하면 제너레이터를 다른 제너레이터에 '임베딩(embeding, composing)'할 수 있습니다.

```js run

function*generateSequence(start,end) {

alert(str);// 0..9A..Za..z

The`yield*`directive*delegates* the execution to another generator. This term means that`yield* gen` iterates over the generator`gen` and transparently forwards its yields outside. As if the values were yielded by the outer generator.

`yield*`지시자는 실행을 다른 제너레이터에*위임합니다(delegate)*. 여기서 '위임'은`yield* gen`이 제너레이터`gen`을 대상으로 반복을 수행하고 그 결과를 바깥으로 전달한다는 것을 의미합니다. 따라서 마치 외부 제너레이터에 의해 값이 산출된 것처럼 동작합니다.

```js run

function*generateSequence(start,end) {

alert(str);// 0..9A..Za..z

A generator composition is a natural way to insert a flow of one generator into another. It doesn't use extra memory to store intermediate results.

제너레이터 컴포지션은 한 제너레이터의 흐름을 다른 제너레이터에 삽입하는 자연스러운 방법입니다. 제너레이터 컴포지션을 사용하면 중간 결과 저장 용도의 추가 메모리가 필요하지 않습니다.

Till this moment, generators were similar to iterable objects, with a special syntax to generate values. But in fact they are much more powerful and flexible.

Until this moment, generators were similar to iterable objects, with a special syntax to generate values. But in fact they are much more powerful and flexible.

That's because`yield` is a two-way road: it not only returns the result outside, but also can pass the value inside the generator.

The error, thrown into the generator attheline`(2)` leads to an exception intheline`(1)` with`yield`. In the example above,`try..catch` catches it and shows.

The error, thrown into the generator at line`(2)` leads to an exception in line`(1)` with`yield`. In the example above,`try..catch` catches it and shows it.

If we don't catch it, then just like any exception, it "falls out" the generator into the calling code.

In modern JavaScript, generators are rarely used. But sometimes they come in handy, because the ability of a function to exchange data with the calling code during the execution is quite unique. And, surely, they are great for making iterable objects.

Also, in the next chapter we'll learn async generators, which are used to read streams of asynchronously generated data (e.g paginated fetches over a network) in`for await ... of`loop.

Also, in the next chapter we'll learn async generators, which are used to read streams of asynchronously generated data (e.g paginated fetches over a network) in`for await ... of`loops.

In web-programming we often work with streamed data, so that's another very important use case.