JS arguments 関数の中だけで使えるオブジェクト引数がなくても使える

「レストパラメーター」の登場により、使用頻度が減っている「arguments オブジェクト」ですが、その使い方を学習しておくことは大切です。

以前に書かれたコードを編集したり、チームでコードを作成したりする際に必要となることがありますので、基本的な使い方をマスターしておきましょう。

arguments オブジェクト
1. 基本的な使い方
2. 引数がない場合
あとがき

arguments オブジェクト

基本的な使い方

const sales = function(item, price){
    console.log('アイテム：' + item);
    console.log('価格：' + price);
}

sales('ジャケット',10000,'男性用');
 アイテム：ジャケット
 価格：10000

「arguments オブジェクト」は関数の中だけで利用出来るオブジェクトになります。

この例では、以前にもご紹介させて頂きましたが、引数が2つ定義されている場合に、2つ以上の値を指定してもエラーにならずに、値は返されます。

つまり、実際に指定された値の数や内容は、関数で定義された引数とイコールではない場合があります。

そのような時に、実際に値がいくつ指定されたのか、指定された内容は何だったのかを確認することが出来るオブジェクトが、「arguments」になるのです。

以下、実際の使い方を見てみましょう。

const sales = function(item, price){
    console.log(arguments);
}

sales('ジャケット',10000,'男性用');

Arguments(3) ['ジャケット', 10000, '男性用', callee: ƒ, Symbol(Symbol.iterator): ƒ]

0: "ジャケット"
1: 10000
2: "男性用"
callee: ƒ (item, price)
length: 3
Symbol(Symbol.iterator): ƒ values()
[[Prototype]]: Object

「 console.log(arguments);」と記述すると、実際に指定された値と数を確認することが出来ます。

ここで注目して欲しいのは、指定した値の数です。

分かりやすく値の名前やその他の情報を表示させていますが、実際に重要となることが多いのは値の数になります。

なお、値の数だけを取得するには、通常「length」プロパティを使います。

const sales = function(item, price){
    console.log(arguments.length);
}

sales('ジャケット',10000,'男性用');
 3

次に「arguments」がどのような場面で活躍するか見ていきましょう。

引数がない場合

「function()」のように、引数が定義されていない場合、「arguments」が活躍する場合があります。

const number = function(){
    for( let i = 0; i < arguments.length; i++){
       console.log(i + arguments[i]);
    }
}

number(1,2,3,4,5);
 1
 3
 5
 7
 9

引数は定義されていませんが、「arguments.length」で値の数を取得しています。

そのため値の数が幾つであっても問題なく結果が返されます。

const sales = function(){
    console.log('アイテム：' + arguments[0]);
    console.log('価格：' + arguments[1]);
}

sales('ジャケット',10000,'男性用');
 アイテム：ジャケット
 価格：10000

こちらの例では、引数の定義がなくても、「arguments」で引数の位置を指定すれば、結果を返すことが出来ます。