JACASCRIPTで引数省略、関数の引数より多い引数を指定した場合はarguments

JACASCRIPTで引数省略、関数の引数より多い引数を指定した場合はarguments
—
–まとめ

内容

Javascript関数　引数を省略したり、追加したり、可変変数の扱い

JACASCRIPTで関数の引数を省略することは可能
ではもし、関数を定義したときの引数より多い引数を指定した場合はどうなるのか？

関数の引数が多くなったときは
arguments
を使う。

argumentsを使って配列のように扱う。

はじめに

関数の引数の数を変更したい要望は時間が経つに連れて増えてくる。
最初の仕様と実際に使ってみた仕様は変わってくる。
引数を変えるだけだから、関数を記述した箇所に引数を入れればいいだけ。
しかし、その記述が多い場合、その作業は大変なものになる。
コンパイルが必要な場合は、もう一度ビルドから必要かも（Javascriptにコンパイルはないから不便はない）。
できれば、関数の定義と新規に引数を追加したファイルだけ関数の引数の追加を修正したいことがある。
JAVASCRIPTは、引数の省略ができる。指定されなかった引数は無視できるように関数を修正しておけばよい。
　それならば、引数が２つの場合で引数を１つ指定するといった使い方ができるし、引数が２つの場合で引数を３つ以上指定することも可能である。
注意するのは、引数を省略できて、かつ引数の数が多いのにその余分な引数を取得する方法（arguments)を理解できている必要がある。
理解していないと、他に関数が定義されていると初心者開発者が混乱してしまう。関数で定義した引数の数が実際に記述されている引数の数が違うと記述の間違いと思う。実際はそうでなくてargumentsで余分な引数を取得していた。

すぐに理解できる関数の引数
引数が１つの場合で引数を１つ指定する
引数が２つの場合で引数を２つ指定する
ここまでは問題ない。引数の数があっているから。
次に、引数が２つの場合で引数を１つ指定するところからいろいろとややこしいことが起こる。

引数が２つの場合で引数を１つ指定する

引数が２つの場合で引数を３つ指定する

—
—
https://oshiete.goo.ne.jp/qa/225482.html
JavaScriptは、関数の引数の省略できる。

省略できるので、関数の定義を変えたあとで、この関数を使用しているhtmlを変更する必要はない。
新しく記載するhtmlで追加した引数を使用したい場合に使える。
つまり、従来の使い方と新しい引数を使った処理に利用できる。

if (a == undefined ){,,,}みたいに判別する

argumentsでlengthで比較することで、すでに記述したJSの関数（定義ではない）を修正せずに、
定義で追加となった引数の再定義を行えば良い。
例えば、
A.htmlにJSでhogehoge(1),引数が1個の関数を書いていたとする。
定義側は
function hogehoge(hiki){
return hiki;
}
だったとする。

この関数の引数を2つにしたい。

としたい。
ここで、すでにA.htmlに書いたhogehoge(1)はそのままにしておいて
これから新しくB.htmlにはhogehoge(1,2)として使いたい。
A.htmlに書いたhogehoge(1)はそのままでも使用できる。第2引数はundefinedになるので
tsugiはundefinedになってしまうが、A.htmlに書いた関数は修正しなくて良い。

実際の引数を省略した場合のJSスクリプトを書いたHTML、

<!DOCTYPE>
<html lang="ja">
    <head>
<script>
function hogehoge(hiki,tsugi){
return hiki+tsugi;
//引数を関数に2つ指定していない場合、エラーになるかつまり数値とUndefinedの加算はできるのか？できない場合は対応が必要　エラーになる NaN つまりできない。
}

function hogehoge_kai(hiki,tsugi){
    if (tsugi == undefined){//if文はカッコを忘れない
    //第2引数が指定されていない場合0としておけば、引数を1つの場合でも対応できる
    tsugi= 0;
    }
return hiki+tsugi;
}

</script>
    </head>

<body>
JSの関数の引数を省略した場合のテスト
久しぶりにJSを使うと全部忘れている。
忘れたことも記述しておく。
if文はカッコを忘れない<br>
<script>
document.write(hogehoge(1));
document.write("<br>");
document.write(hogehoge_kai(1));
document.write("<br>");
document.write(hogehoge_kai(1,2));
document.write("<br>");
/*
NaN ;hogehogeは第1引数と第2引数の加算で第2引数がundefinedなので数値との加算でエラー
1　；hogehoge_kaiは第2引数がないときの初期値を第2引数に与えたのでエラーはでない。
3　；第2引数を与えているので、第1引数と第2引数の加算が表示された
*/
</script>

</body>
</html>

<!DOCTYPE>

<head>

function hogehoge(hiki,tsugi){

return hiki+tsugi;

//引数を関数に2つ指定していない場合、エラーになるかつまり数値とUndefinedの加算はできるのか？できない場合は対応が必要　エラーになる NaN つまりできない。

}

function hogehoge_kai(hiki,tsugi){

if (tsugi == undefined){//if文はカッコを忘れない

//第2引数が指定されていない場合0としておけば、引数を1つの場合でも対応できる

tsugi= 0;

}

return hiki+tsugi;

}

</script>

</head>

<body>

JSの関数の引数を省略した場合のテスト

久しぶりにJSを使うと全部忘れている。

忘れたことも記述しておく。

if文はカッコを忘れない<br>

document.write(hogehoge(1));

document.write("<br>");

document.write(hogehoge_kai(1));

document.write("<br>");

document.write(hogehoge_kai(1,2));

document.write("<br>");

NaN ;hogehogeは第1引数と第2引数の加算で第2引数がundefinedなので数値との加算でエラー

1　；hogehoge_kaiは第2引数がないときの初期値を第2引数に与えたのでエラーはでない。

3　；第2引数を与えているので、第1引数と第2引数の加算が表示された

</script>

</body>

</html>

関数の引数より多い引数を指定した場合はargumentsでlengthで比較して判別する
https://tech.nikkeibp.co.jp/it/atcl/column/14/091700069/091700004/

argumentsでlengthで比較して必要な引数に対して処理をする。
https://wp-p.info/tpl_rep.php?cat=js-application&fl=r12

argumentsを配列に置き換える書き方が記載されている。
https://takamints.hatenablog.jp/entry/varg-on-es6-modern-javascript#argumentsは明示的な引数宣言と無関係

または、引数が多い場合はオブジェクトにして読みやすくする
https://qiita.com/nekoneko-wanwan/items/6c23ad719c4185c92863

argumentsを使用して、関数の引数が3つ以降

こっちは、argumentsを使用して、関数の引数が3つ以降は定義していなくても、実際の関数の記述で3つ目以降が記載されていた場合に加算するようにしたもの
定義
function hogehoge_kai(hiki,tsugi):引数は2つしかないない。
実際の記述
hogehoge_arg(1,2,3,4); :引数を4つにしてもエラーにはならず、数字が加算される。この場合

–画像拡大

関数、引数

–コード

<!DOCTYPE>
<html lang="ja">
    <head>
<script>
function hogehoge(hiki,tsugi){
return hiki+tsugi;
//引数を関数に2つ指定していない場合、エラーになるかつまり数値とUndefinedの加算はできるのか？
//できない場合は対応が必要　エラーになる NaN つまりできない。
}

function hogehoge_kai(hiki,tsugi){
    if (tsugi == undefined){//if文はカッコを忘れない
    //第2引数が指定されていない場合0としておけば、引数を1つの場合でも対応できる
    tsugi= 0;
    }
return hiki+tsugi;
//引数を関数に2つ指定していない場合、エラーになるかつまり数値とUndefinedの加算はできるのか？できない場合は対応が必要　エラーになる NaN つまりできない。
}

function hogehoge_arg(hiki,tsugi){//引数は2つのままで3つ目の引数を入れる
    var kasan;
    kasan = 0;//初期設定を忘れない
    if (tsugi == undefined){//if文はカッコを忘れない
    //第2引数が指定されていない場合0としておけば、引数を1つの場合でも対応できる
    tsugi= 0;
    }
    if (arguments.length >= 3){
        for(i = 2; i< arguments.length; i++){
        //3つ目は配列では2番めになる
            if (!isNaN(arguments[i])){//数字なら加算          //isNaN(変数)で判別できて、NANなら（数字でないときに）Trueとなるらしい
            	kasan = kasan + arguments[i];
            }
        }
    }
 
return hiki+tsugi+kasan;
}

</script>
    </head>

<body>
JSの関数の引数を省略した場合のテスト<br>
久しぶりにJSを使うと全部忘れている。<br>
忘れたことも記述しておく。<br>
if文はカッコを忘れない<br>
<script>
document.write(hogehoge(1));//正しくは引数が2つ必要なのに1つしか入れていない。
//javascriptでは省略できるが内部コードでは必須のためにエラーになる
document.write("<br>");
document.write(hogehoge_kai(1));
document.write("<br>");
document.write(hogehoge_kai(1,2));
document.write("<br>");
document.write(hogehoge_arg(1,2,3,"aaa"));
document.write("<br>");
document.write(hogehoge_arg(1,2,3,4));
document.write("<br>");
document.write(hogehoge_arg(1,2));
document.write("<br>");
/*
NaN ;hogehogeは第1引数と第2引数の加算をする。
第2引数がundefinedなので数値との加算でエラー
NaNはNot A Number
1　；hogehoge_kaiは第2引数がないときの初期値を第2引数に与えたのでエラーはでない。
3　；第2引数を与えているので、第1引数と第2引数の加算が表示された
6	;aaaは無視される
10	;関数に引数を指定していなくてもargumentsで取得できる
3	;引数2つでも計算される
*/
</script>

</body>
</html>

<!DOCTYPE>

<head>

function hogehoge(hiki,tsugi){

return hiki+tsugi;

//引数を関数に2つ指定していない場合、エラーになるかつまり数値とUndefinedの加算はできるのか？

//できない場合は対応が必要　エラーになる NaN つまりできない。

}

function hogehoge_kai(hiki,tsugi){

if (tsugi == undefined){//if文はカッコを忘れない

//第2引数が指定されていない場合0としておけば、引数を1つの場合でも対応できる

tsugi= 0;

}

return hiki+tsugi;

}

function hogehoge_arg(hiki,tsugi){//引数は2つのままで3つ目の引数を入れる

var kasan;

kasan = 0;//初期設定を忘れない

if (tsugi == undefined){//if文はカッコを忘れない

//第2引数が指定されていない場合0としておけば、引数を1つの場合でも対応できる

tsugi= 0;

}

if (arguments.length >= 3){

for(i = 2; i< arguments.length; i++){

//3つ目は配列では2番めになる

if (!isNaN(arguments[i])){//数字なら加算 //isNaN(変数)で判別できて、NANなら（数字でないときに）Trueとなるらしい

kasan = kasan + arguments[i];

}

return hiki+tsugi+kasan;

}

</script>

</head>

<body>

JSの関数の引数を省略した場合のテスト<br>

久しぶりにJSを使うと全部忘れている。<br>

忘れたことも記述しておく。<br>

if文はカッコを忘れない<br>

document.write(hogehoge(1));//正しくは引数が2つ必要なのに1つしか入れていない。

//javascriptでは省略できるが内部コードでは必須のためにエラーになる

document.write("<br>");

document.write(hogehoge_kai(1));

document.write("<br>");

document.write(hogehoge_kai(1,2));

document.write("<br>");

document.write(hogehoge_arg(1,2,3,"aaa"));

document.write("<br>");

document.write(hogehoge_arg(1,2,3,4));

document.write("<br>");

document.write(hogehoge_arg(1,2));

document.write("<br>");

NaN ;hogehogeは第1引数と第2引数の加算をする。

第2引数がundefinedなので数値との加算でエラー

NaNはNot A Number

1　；hogehoge_kaiは第2引数がないときの初期値を第2引数に与えたのでエラーはでない。

3　；第2引数を与えているので、第1引数と第2引数の加算が表示された

6 ;aaaは無視される

10 ;関数に引数を指定していなくてもargumentsで取得できる

3 ;引数2つでも計算される

</script>

</body>

</html>

こちらの記事もどうぞ

開発言語別簡易文法チート表、VB.NETとC#のチート表他Javascript、PHP 開発言語別簡易文法チート表、VB.NETとC#のチート表他Javascript、PHP チートと […]
JAVASCRIPT 構造体もどきと自分のファイル名（URL)を取得 […]
JAVASCRIPTでドラッグ・アンド・ドロップのリンクメモ　 JAVASCRIPTでドラッグ・アンド・ドロップのメモ　以前ドラッグ・アンド・ドロップを試 […]
Javascript、GASとも構造体はないけど、クラスかオブジェクトを使えば Javascript、GASとも構造体はないけど、クラスかオブジェクトを使えば構造体っぽくできるよ […]
エイジャックスAJAXドキュメント調査中、アジャックスって読んでたエイジャックスAJAXドキュメント調査中、アジャックスって読んでたエイジャックスAJAXの […]
2018年次回作成アプリ学習言語ネタ jquery ajax,まずはjqueryを勉強中 2018年次回作成アプリ学習言語ネタ jquery […]

ピクチャ

ピクチャは海外ドラマ、漫画、英単語語呂合わせ法、アイフォンアプリ等の記事を紹介します

JACASCRIPTで引数省略、関数の引数より多い引数を指定した場合はarguments