JavaScript 関数のパラメータ

JavaScript 関数パラメータ：デフォルト値、残余引数、受け渡し方法

JavaScript 関数パラメータ：デフォルト値、残余引数、受け渡し方法

この記事では、JavaScript 関数のパラメータについて掘り下げ、パラメータの受け渡し方法、デフォルトパラメータ、残余引数などを解説し、具体的な例を通して、これらの機能を駆使して、より簡潔で効率的なコードを記述する方法を説明します。

JavaScript 関数パラメータの基本

パラメータとは

関数は特定のタスクを実行するために設計されたコードのブロックであり、パラメータは関数に情報を受け渡すための仕組みです。パラメータは関数定義の中で宣言され、関数呼び出し時に具体的な値（引数）として渡されます。

仮引数と実引数

  • 仮引数 (formal parameter): 関数定義時に使用される変数名です。関数の内部でのみ使用可能です。
  • 実引数 (actual argument): 関数呼び出し時に関数に渡される具体的な値です。

    <script>
      function greet(name) { // name は仮引数
        console.log("こんにちは、" + name + "さん！");
      }

      greet("太郎"); // "太郎" は実引数
    </script>

パラメータの受け渡し方法

値渡し

JavaScript では、プリミティブ型（数値、文字列、真偽値など）の変数は値渡しで関数に渡されます。これは、関数がパラメータのコピーを受け取り、元の変数には影響を与えないことを意味します。 


    <script>
      function changeValue(x) {
        x = 100;
        console.log("関数内: x =", x); // 関数内: x = 100
      }

      let num = 5;
      changeValue(num);
      console.log("関数外: num =", num); // 関数外: num = 5
    </script>

参照渡し

オブジェクトや配列などの参照型は、参照渡しで関数に渡されます。これは、関数が元のオブジェクトへの参照を受け取ることを意味します。そのため、関数内でオブジェクトのプロパティを変更すると、元のオブジェクトにも影響を与えます。 


    <script>
      function changeProperty(obj) {
        obj.name = "花子";
        console.log("関数内: obj.name =", obj.name); // 関数内: obj.name = 花子
      }

      let person = { name: "太郎" };
      changeProperty(person);
      console.log("関数外: person.name =", person.name); // 関数外: person.name = 花子
    </script>

パラメータ数の不一致

パラメータ過多

関数呼び出し時に、関数定義よりも多くの引数を渡した場合、余分な引数は無視されます。

パラメータ不足

関数呼び出し時に、関数定義よりも少ない引数を渡した場合、不足しているパラメータには `undefined` が割り当てられます。

デフォルトパラメータ

デフォルトパラメータの導入

ES6 (ECMAScript 2015) より、関数パラメータにデフォルト値を設定できるようになりました。デフォルトパラメータは、関数呼び出し時に引数が渡されなかった場合、または `undefined` が渡された場合に使用されます。

デフォルトパラメータの使用

デフォルト値の設定


    <script>
      function greet(name = "ゲスト") {
        console.log("こんにちは、" + name + "さん！");
      }

      greet(); // こんにちは、ゲストさん！
      greet("太郎"); // こんにちは、太郎さん！
    </script>

デフォルトパラメータの評価

デフォルトパラメータは、関数定義時ではなく、関数呼び出し時に評価されます。

デフォルトパラメータの利点

  • コードの可読性が向上する
  • コード量が減少し、関数呼び出しが簡略化される

残余引数

残余引数の概念

ES6 より導入された残余引数は、関数に可変長の引数を渡すことを可能にします。残余引数は、関数定義の最後のパラメータとして `...` を付けて宣言します。

残余引数の使用

任意の数の引数を収集する


    <script>
      function sum(...numbers) {
        let total = 0;
        for (let number of numbers) {
          total += number;
        }
        return total;
      }

      console.log(sum(1, 2, 3)); // 6
      console.log(sum(1, 2, 3, 4, 5)); // 15
    </script>

他のパラメータとの組み合わせ


    <script>
      function greet(greeting, ...names) {
        for (let name of names) {
          console.log(greeting + "、" + name + "さん！");
        }
      }

      greet("こんにちは", "太郎", "花子");
      // こんにちは、太郎さん！
      // こんにちは、花子さん！
    </script>

残余引数の利点

  • 不定数の引数を扱う処理が簡略化される
  • コードの柔軟性が向上する

JavaScript 関数パラメータのベストプラクティス

  • パラメータは簡潔に保つ：パラメータが多すぎると、コードが複雑になるため、避けるべきです。
  • わかりやすいパラメータ名を使用する：明確でわかりやすいパラメータ名を使用することで、コードの可読性が向上します。
  • デフォルトパラメータと残余引数を適切に使用する：状況に応じて適切なパラメータタイプを選択することで、コードの柔軟性と保守性を向上させることができます。
  • 副作用を避ける：関数内部で、渡されたパラメータ、特に参照型の値を直接変更することは避けるべきです。代わりに、コピーを作成して操作することをお勧めします。

まとめ

この記事を通して、JavaScript 関数のパラメータについて理解を深めることができたかと思います。パラメータの受け渡し方法、デフォルトパラメータ、残余引数の使い方を習得することで、より簡潔で、柔軟性があり、効率的な JavaScript コードを記述できるようになります。

関連情報

よくある質問

質問 回答
残余引数と arguments オブジェクトの違いは何ですか？ 残余引数は ES6 で導入された新しい機能であり、 arguments オブジェクトよりも使いやすくなっています。残余引数は配列であるため、配列のメソッドを使用できますが、 arguments オブジェクトは配列風オブジェクトであり、配列のメソッドを使用するには Array.from() などで配列に変換する必要があります。
デフォルトパラメータはどのような場合に役立ちますか？ 関数の呼び出し時に、引数が渡されない場合や undefined が渡される場合に、デフォルト値を設定したい場合に役立ちます。例えば、オプションの引数を持つ関数を作成する場合などに便利です。
JavaScript で参照渡しを実現する方法はありますか？ JavaScript では、プリミティブ型は値渡し、オブジェクトや配列などの参照型は参照渡しのように動作しますが、実際には参照のコピーが渡されています。そのため、関数内でオブジェクトのプロパティを変更すると、元のオブジェクトにも影響を与えますが、オブジェクト自体を別のオブジェクトに置き換えることはできません。