JavaScript の yield

概要: このチュートリアルでは、JavaScript のyieldキーワードと、ジェネレータ関数での使用方法について学習します。

JavaScript yieldキーワードの紹介

yieldキーワードを使用すると、ジェネレータ関数（function*）を一時停止および再開できます。

yieldキーワードの構文を次に示します。

[variable_name] = yield [expression];
Code language: JavaScript (javascript)

この構文では

• expressionは、イテレーションプロトコルを介してジェネレータ関数から返す値を指定します。expressionを省略すると、yieldはundefinedを返します。
• variable_nameは、イテレータオブジェクトのnext()メソッドに渡されるオプションの値を格納します。

JavaScript yield の例

yieldキーワードの使用例をいくつか見てみましょう。

A) 値の返却

次の簡単な例は、yieldキーワードを使用してジェネレータ関数から値を返す方法を示しています。

function* foo() { 
    yield 1;
    yield 2;
    yield 3;
}

let f = foo();

console.log(f.next());
Code language: JavaScript (javascript)

出力

{ value: 1, done: false }
Code language: CSS (css)

ご覧のように、yieldの後に続く値は、next()が呼び出されたときに戻りオブジェクトのvalueプロパティに追加されます。

yield 1;
Code language: JavaScript (javascript)

B) undefined の返却

この例は、yieldキーワードを使用してundefinedを返す方法を示しています。

function* bar() {
    yield;
}

let b = bar();
console.log(b.next()); 
Code language: JavaScript (javascript)

出力

{ value: undefined, done: false }
Code language: CSS (css)

C) next()メソッドへの値の渡

次の例では、yieldキーワードは、next()メソッドに渡された引数を評価する式です。

function* generate() {
    let result = yield;
    console.log(`result is ${result}`);
}

let g = generate();
console.log(g.next()); 

console.log(g.next(1000));
Code language: JavaScript (javascript)

最初の呼び出しg.next()は、次のオブジェクトを返します。

{ value: undefined, done: false }
Code language: CSS (css)

2回目の呼び出しg.next()は、次のタスクを実行します。

• yieldを1000に評価します。
• resultにyieldの値（1000）を代入します。
• メッセージを出力し、オブジェクトを返します。

出力

result is 1000
{ value: undefined, done: true }
Code language: CSS (css)

D) 配列での yield の使用

次の例では、yieldキーワードを配列の要素として使用しています。

function* baz() {
    let arr = [yield, yield];
    console.log(arr);
}

var z = baz();

console.log(z.next());  
console.log(z.next(1)); 
console.log(z.next(2));
Code language: JavaScript (javascript)

最初の呼び出しz.next()は、arr配列の最初の要素を1に設定し、次のオブジェクトを返します。

{ value: undefined, done: false }
Code language: CSS (css)

2回目の呼び出しz.next()は、arr配列の2番目の要素を2に設定し、次のオブジェクトを返します。

{ value: undefined, done: false }
Code language: CSS (css)

3回目の呼び出しz.next()は、arr配列の内容を表示し、次のオブジェクトを返します。

[ 1, 2 ]
{ value: undefined, done: true }
Code language: CSS (css)

E) yield を使用して配列を返す

次のジェネレータ関数は、yieldキーワードを使用して配列を返します。

function* yieldArray() {
    yield 1;
    yield [ 20, 30, 40 ];
}

let y = yieldArray();

console.log(y.next()); 
console.log(y.next()); 
console.log(y.next());
Code language: JavaScript (javascript)

最初の呼び出しy.next()は、次のオブジェクトを返します。

{ value: 1, done: false }
Code language: CSS (css)

2回目の呼び出しy.next()は、次のオブジェクトを返します。

{ value: [ 20, 30, 40 ], done: false }
Code language: CSS (css)

この場合、yieldは[ 20, 30, 40 ]配列を戻りオブジェクトのvalueプロパティの値として設定します。

3回目の呼び出しy.next()は、次のオブジェクトを返します。

{ value: undefined, done: true }
Code language: CSS (css)

F) yield を使用して配列の個々の要素を返す

次のジェネレータ関数を参照してください。

function* yieldArrayElements() {
    yield 1;
    yield* [ 20, 30, 40 ];
}

let a = yieldArrayElements();

console.log(a.next()); // { value: 1, done: false }
console.log(a.next()); // { value: 20, done: false }
console.log(a.next()); // { value: 30, done: false }
console.log(a.next()); // { value: 40, done: false }
Code language: JavaScript (javascript)

この例では、yield*は新しい構文です。yield*式は、別のイテラブルオブジェクトまたはジェネレータに委任するために使用されます。

その結果、次の式は[20, 30, 40]配列の個々の要素を返します。

yield* [20, 30, 40];
Code language: JavaScript (javascript)

このチュートリアルでは、JavaScriptのyieldキーワードと、関数ジェネレータでの使用方法について学習しました。