【JavaScript入門】引数の仕様

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

引数の仕様

　関数の引数にまつわる仕様は意外とバリエーション豊富で、最初はすべて覚える必要はありません。ただし、オブジェクトを引数に渡したときの挙動や、引数の数が合わないときの動きなど、知っておくと便利なポイントがいくつかあります。ここでは、そのような場面でよく遭遇するトピックをまとめます。

１．プリミティブ型とオブジェクトを引数に渡すときの違い

プリミティブ型 (number, string, boolean, etc.)：値が直接関数の引数変数にコピーされる。関数の中で引数変数を変更しても、呼び出し元には影響しない。
オブジェクト (Array含む)：値そのものではなく「参照」が関数に渡される。関数内部でオブジェクトの内容を変更すると、呼び出し元のオブジェクトも変わる。

２．オブジェクトや配列の内容を関数が書き換える例

【myFunctionArgs.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myFunctionArgs.html</title>
</head>
<body>
  <h1>引数の仕様サンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて結果を確認してください。</p>

  <script>
    // 1. オブジェクトの値を関数内部で書き換える
    function modifyObject(argObj) {
      argObj.price = 0;
    }

    let drink = { name: 'コーヒー', price: 350 };
    console.log('呼び出し前:', drink);
    modifyObject(drink);
    console.log('呼び出し後:', drink);

    // 2. 配列の要素を関数内部で書き換える
    function modifyArray(argArray) {
      argArray[0] = '変更後';
    }

    let teaList = ['ほうじ茶', '抹茶ラテ', 'ウーロン茶'];
    console.log('呼び出し前:', teaList);
    modifyArray(teaList);
    console.log('呼び出し後:', teaList);

    // 3. プリミティブ型は関数内で変更しても呼び出し元に影響しない
    function modifyNumber(num) {
      num = num + 100;
      console.log('関数内での num:', num);
    }

    let amount = 200;
    console.log('呼び出し前 amount:', amount);
    modifyNumber(amount);
    console.log('呼び出し後 amount:', amount);
  </script>
</body>
</html>

実行結果

デバックコンソールの出力

呼び出し前: {name: "コーヒー", price: 350}
呼び出し後: {name: "コーヒー", price: 0}
呼び出し前: ["ほうじ茶", "抹茶ラテ", "ウーロン茶"]
呼び出し後: ["変更後", "抹茶ラテ", "ウーロン茶"]
呼び出し前 amount: 200
関数内での num: 300
呼び出し後 amount: 200

３．引数の数と実際の引数個数が一致しない場合

　JavaScript の関数は、引数を定義していても、その数に合わない呼び出しをしてもエラーにはなりません。

function showSingleArg(arg) {
  console.log('引数:', arg);
}

// 引数なし
showSingleArg();         // => 引数: undefined
// 引数1つ
showSingleArg('だけ');   // => 引数: だけ
// 引数2つ
showSingleArg('一番目', '二番目'); // => 引数: 一番目 (二番目は無視)

引数を少なく渡した場合：渡されなかった引数は undefined になる
引数を多く渡した場合：余った引数は無視される

まとめ

プリミティブ型を引数にした場合：値そのものが渡されるため、関数内での変更は呼び出し元に影響しない。
オブジェクトや配列を引数にした場合：参照が渡されるため、関数内での変更が呼び出し元にも反映される。
引数の数が一致しなくてもエラーにならない：渡されない引数は undefined、多い分は無視。

　これらの挙動を知っておくと、予期しないバグを防ぎやすくなります。JavaScript では厳密な引数チェックは行われないため、必要に応じて自前で引数の型や数を検証することもあります。