JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの関数*（function*）とは？ジェネレーター関数の基本と使い方

function*宣言とは

JavaScriptのfunction*宣言は、ジェネレーター関数を定義するための構文です。ジェネレーター関数を呼び出すと、即座に処理が完了するのではなく、Generatorオブジェクトを返します。

通常の関数は一度呼び出されると最後まで一気に実行されますが、ジェネレーター関数では、yieldキーワードの位置で処理を一時停止し、後から再開することができます。この仕組みにより、コードのフロー制御を柔軟に管理できるのが大きな特徴です。

構文

ジェネレーター関数の構文は以下のとおりです。functionキーワードの直後にアスタリスク（*）を付けます。アスタリスクの位置は、スペースの有無にかかわらずいずれの書き方でも動作します。

function *myFunction() {}
// または
function* myFunction() {}
// または
function*myFunction() {}

ジェネレーター関数の使い方

ここからは、実際のコード例を使って、ジェネレーター関数の使い方を確認していきましょう。

サンプルコード

<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

コードの解説

この例では、ジェネレーター関数display()の中で、変数numを1から順にインクリメントしながらyieldで値を返しています。

next()メソッドを呼び出すたびに、前回yieldで停止していた箇所から処理が再開され、次の値がvalueプロパティとして取得できます。

  • 1回目〜4回目のnext()呼び出し：whileループ内のyieldにより、1、2、3、4が順番に返される
  • 5回目のnext()呼び出し：ループ条件num < 5が成立しなくなり、関数が終了するためundefinedが返される

このように、ジェネレーター関数は「必要なときに必要なだけ値を取り出す」という遅延評価的な処理を実現でき、無限シーケンスの生成や非同期処理の制御など、さまざまな場面で活用できます。

  1. JavaScriptの型変換に便利な「+」演算子の重要性とは？具体例付きで解説

    JavaScriptにおける「+」演算子は、数値の加算や文字列の連結など幅広い用途を持つ一方で、実は型変換においても非常に重要な役割を果たしています。普段は足し算の計算に使うことが多いですが、単項演算子（オペランドが一つだけの形）として使うことで、文字列を驚くほど簡単に数値へ変換できるのです。 文字列を数値へ変換する例 <html> <body> <script>     var num = 23;     int = +num;     

  2. JavaScriptの型強制（Type Coercion）とは？仕組みを初心者向けにわかりやすく解説

    型強制（Type Coercion）とは、あるデータ型が自動的・暗黙的に別のデータ型へと変換される仕組みのことです。JavaScriptは動的型付け言語であり、開発者が明示的に型を指定しなくても、状況に応じて値の型が自動的に変換されます。特に注意が必要なのが「+」演算子です。片方が文字列の場合、数値は文字列に変換されて文字列の連結として処理されます。一方、「-」「*」「/」などの算術演算子では、文字列は数値へ変換されるため、挙動の違いを理解しておくことが重要です。以下に、JavaScriptにおける型強制の動作を確認できるサンプルコードを示します。サンプルコード<!DOCTYPE htm