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

JavaScriptの関数パラメーターとは？基本の使い方を実例つきで解説

JavaScriptでは、関数を呼び出すときにさまざまな値（引数）を渡すことができます。渡された引数は関数の内部で受け取ることができ、その値に対して自由に処理を行うことが可能です。

関数パラメーターの基本

関数は、カンマで区切ることで複数のパラメーターを受け取ることができます。パラメーターとは、関数が呼び出されたときに外部から渡される値を受け取るための変数のことです。

たとえば「名前」と「年齢」という2つの情報を使いたい場合、次のように関数定義時に2つのパラメーターを指定します。

function sayHello(name, age) {
  // nameとageを使った処理をここに書く
}

実行例

以下のコードは、ボタンをクリックすると関数に引数を渡して呼び出すシンプルな例です。実際にブラウザで動かして、パラメーターの受け渡しを確認してみましょう。

<html>
   <head>
      <script>
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>
   </head>
   <body>
      <p>次のボタンをクリックすると関数が呼び出されます</p>

      <form>
         <input type = "button" onclick = "sayHello('John', 27)" value = "詳細">
      </form>
   </body>
</html>

コードの解説

この例では、sayHello(name, age)という関数を定義しています。ボタンがクリックされると、'John'と27という2つの引数が渡され、関数内のnameとageにそれぞれ代入されます。その結果、「John is 27 years old.」という文字列が画面に出力されます。

補足：現代的な書き方について

上記の例で使っているdocument.write()は古い手法のため、現在の開発ではconsole.log()やDOM操作を使って出力するのが一般的です。

function sayHello(name, age) {
  console.log(`${name} is ${age} years old.`);
}

sayHello('John', 27); // "John is 27 years old."

また、ES2015以降ではデフォルトパラメーターも利用できます。引数が渡されなかった場合に初期値を設定できるため、より柔軟な関数設計が可能になります。

function greet(name = 'ゲスト') {
  console.log(`こんにちは、${name}さん！`);
}

greet();        // "こんにちは、ゲストさん！"
greet('田中');   // "こんにちは、田中さん！"

まとめ

関数パラメーターを使うことで、同じ関数をさまざまな値に対して再利用できます。複数の値はカンマ区切りで渡せるほか、デフォルト値やテンプレートリテラルなどを組み合わせることで、より読みやすく保守しやすいコードを書くことができます。

  1. JavaScriptの部分関数（Partial Function）とは？仕組みと実装例をわかりやすく解説

    部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。 この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。 コード例 以下

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2