JavaScript 速習チュートリアル

JavaScript 関数の引数

1. パラメータ (Parameters) vs. 引数 (Arguments)

JavaScript において、パラメータ引数は明確に区別される概念です。

  • パラメータ (Parameters):関数定義時にリストされる名前。
  • 引数 (Arguments):関数を呼び出す際に渡され、関数が受け取る実際の値。

1.1 具体的な例

// a と b はパラメータ
function 掛け算(a, b) {
  return a * b;
}

// 4 と 5 は引数
let 結果 = 掛け算(4, 5);

上記の例では:

  • ab はパラメータです。
  • 45 は引数です。
  • 引数 4 はパラメータ a に割り当てられます。
  • 引数 5 はパラメータ b に割り当てられます。

2. arguments オブジェクト

JavaScript の関数には、arguments オブジェクトという組み込みオブジェクトが存在します。
このオブジェクトには、関数が呼び出された際に使用された引数が、配列のような形式で格納されています。

これを利用することで、例えば数値リストの中から最大値を見つけるような関数を簡単に作成できます。

2.1 最大値を求める例

x = 最大値を探す(1, 123, 500, 115, 44, 88);

function 最大値探す() {
  let max = -Infinity;
  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}

2.2 すべての入力値を合計する例

x = すべて合計(1, 123, 500, 115, 44, 88);

function すべて合計() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

もし関数が定義されたパラメータ数よりも多くの引数で呼び出された場合、それらの過剰な引数も arguments オブジェクトを通じてアクセスすることが可能です。

3. 引数の順序は重要

引数は、出現する順番に従ってパラメータに割り当てられます。

function 引き算(a, b) {
  return a - b;
}

let x1 = 引き算(10, 5); // 5 が返る
let x2 = 引き算(5, 10); // -5 が返る

順序が異なると、結果も異なるものになります。

4. 引数には変数も使用可能

引数はリテラル値である必要はありません。変数を使用することもできます。

let x = 5;
let y = 6;

function 掛け算(a, b) {
  return a * b;
}

掛け算(x, y);

5. 引数に関するルール (Argument Rules)

JavaScript の関数定義には以下の特徴があります。

  • データ型の指定なし:パラメータのデータ型を指定しません。
  • 型チェックなし:渡された引数に対して型チェックを行いません。
  • 個数チェックなし:受け取った引数の個数を確認しません。

6. 不適切な引数 (Incorrect Arguments)

不適切な引数を渡すと、期待しない結果が返されることがあります。

function 摂氏に変換(華氏) {
  return (5/9) * (華氏 - 32);
}

// 数値ではなく文字列を渡した場合
let 値 = 摂氏に変換("太郎"); // 結果は NaN になる

7. 引数が不足している場合 (Missing Arguments)

パラメータの数よりも少ない引数で関数を呼び出した場合、不足している値は undefined になります。

function 掛け算(a, b) {
  return a * b;
}

掛け算(4);

この例では、bundefined となるため、計算結果は NaN となります。

8. デフォルトパラメータ (Default Parameters)

引数が不足している場合に undefined になる挙動が不都合な場合は、パラメータにデフォルト値を割り当てることができます。

8.1 以前の手法(ES5まで)

function 私の関数(x, y) {
  if (y === undefined) {
    y = 2;
  }
}

8.2 デフォルトパラメータ値(ES2015 / ES6)

ECMAScript 2015 から、パラメータに直接デフォルト値を設定できるようになりました。引数が渡されない、または undefined が渡された場合にこの値が使用されます。

// y が渡されない場合、y = 10 となる
function 私の関数(x, y = 10) {
  return x + y;
}
私の関数(5); // 15

9. レストパラメータ

レストパラメータ(残余引数) (...) を使用すると、不特定の数の引数を一つの配列として扱うことができます。

function 合計(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = 合計(4, 9, 16, 25, 29, 100, 66, 77);

10. 引数は「値渡し」

関数呼び出しにおけるパラメータは、その関数の引数となります。
JavaScript の引数は値渡し(Pass by value)です。関数は値そのものを受け取るだけで、その値が格納されているメモリ上の場所(変数自体)は知りません。

もし関数の中で引数の値を変更したとしても、関数の外にある元の変数の値は変わりません。

11. オブジェクトは「参照渡し」のように振る舞う

JavaScript において、オブジェクトの参照(Reference)は「値」として扱われます。
そのため、オブジェクトは参照渡し(Pass by reference)であるかのように振る舞います。

もし関数がオブジェクトのプロパティを変更した場合、それは関数外にある元のオブジェクトにも反映されます

function プロパティ変更(obj) {
  obj.name = "変更済み";
}

let ユーザー = { name: "オリジナル" };
プロパティ変更(ユーザー);
console.log(ユーザー.name); // "変更済み" と表示される