javascript 関数の引数をindex番号で指定する

作成日 2020.10.19
更新日 2022.07.13
javascript
javascript

javascriptで、関数の引数をindex番号で指定するサンプルコードを記述してます。

1. 環境
2. index番号で指定
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.114

Javascript サンプル集はこちら

index番号で指定

引数はargumentsを使用すれば、index番号を指定して利用することが可能です。

function hoge(val1, val2, val3) {
  console.log(arguments[0] + arguments[1] + arguments[2]);
}

hoge('hello', 'world', '!!');

<出力結果>
helloworld!!

アロー関数で使用すると「Uncaught ReferenceError: arguments is not defined」が発生します。

アロー関数の使い方

const hoge = (val1, val2, val3) => {
  console.log(arguments[0] + arguments[1] + arguments[2]);
}

hoge('hello', 'world', '!!');
// Uncaught ReferenceError: arguments is not defined

サンプルコード

以下は、
「実行」ボタンをクリックすると、引数をindex番号で指定した関数の実行結果を表示するだけの
サンプルコードとなります。

※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30px;
  }
</style>
<script>

  function hoge(args1,args2,arg3) {

    // 表示用の要素を取得
    let elm = document.getElementsByClassName("badge")[0];
    // 累乗を計算
    elm.textContent = arguments[0] + arguments[1] + arguments[2];

  }

  window.onload = function () {

    // ボタンを取得
    let elmbtn = document.getElementById('btn');
    // クリックイベントを登録
    elmbtn.onclick = function () {
      hoge(1,2,3);
    };

  }

</script>

<body>
  <div class="main container">
    
    <h2><span class="badge bg-primary">結果</span></h2>

    <div class="row">
      <button id="btn" type="button" class="btn btn-warning">
        実行
      </button>
    </div>

  </div>
</body>

</html>

表示されていることが確認できます。

また、javascriptは以下のようにdocument.getElementByIdを省略して「id名」のみで記述することもできます。関数もアロー関数を使用して記述できます。

javascript アロー関数のサンプル

const hoge= (args1,args2,arg3) => {

    // 表示用の要素を取得
    let elm = document.getElementsByClassName("badge")[0];
    // 累乗を計算
    elm.textContent = arguments[0] + arguments[1] + arguments[2];

}

onload = () => {

    btn.onclick = () => {
        hoge(1,2,3);
    };

}