argumentsを理解する

お断り：ここで検討している、argumentsを使ったコードは古いコードです。ES6以降は、argumentsオブジェクトでなく残余引数が推奨されます。

Effective JavaScript輪読会#3、argumentsを理解してなかったのでその復習をする。

MDNから。

arguments は配列風Array-likeオブジェクトであり、関数に渡された引数の値を含んでおり、関数内からアクセスすることができます。

Effective JavaScript(以下EJS)での説明はこんな感じ。

...JavaScriptがすべての関数に暗黙のうちに提供するローカル変数、 argumentsを利用する。このargumentsオブジェクトは、実引数を配列のように扱うインターフェイスを提供するのだ。

「配列のよう」（Array-like）てのがポイントなのね。（本当の配列とどう違うかは後述）

コードでいじってみよう

配列風なので、[0]などのブラケット記法でアクセス可能。

function fn(a) {
    console.log(arguments[0]);
}

fn(42); // 42

引数の数を増やした場合、対応するインデックスナンバーでそれぞれの引数にアクセスが可能。

function fn(a,b,c) {
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
}

fn(42, 'hoge', {name: 'Taro'});
// 42, 'hoge', {name: "Taro'}

仮引数に実引数を渡さないと、undefinedになる。

function fn(a,b,c) {
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
}

fn(42, 'hoge');
// 42, 'hoge', undefined

arguments.lengthで、渡された引数の個数にもアクセス可能。

function fn(a,b,c) {
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments.length);
}

fn(42, 'hoge', {name: 'Taro'}); 
// 42, 'hoge', {name: 'Taro'}, 3

argumentsは、設定されている仮引数や実際に渡された引数の数に影響されない柔軟なインターフェイスを持っているので、ES6より前のJSで可変長引数を実現するのに使われていたそう。

けれど、ES6以降、残余引数構文が導入されたことによって、実際の使いどころはなくなっているのが現状のようです。

argumentsオブジェクトができないこと

配列「のよう」で、配列そのものではないということは、どういうことなのだろう？

注: 「配列風」とは、 arguments が length プロパティと 0 から始まる添字のプロパティを持っているものの、 Array の組込みメソッド、例えば forEach() や map() を持っていないということです。

配列に使える便利なメソッドが使えないということなのだね。MDNにはこれを配列に変換する方法も書かれているけれど、arguments自体が非推奨になっているので、詳細は割愛します。

これを使ったarguments.calleeやarguments.callee.callerの考察が次の担当なので、復習しました。

研究課題

・argumentsはアロー関数で使えない。アロー関数の特殊な振る舞い?

arguments オブジェクトはすべての（アローではない）関数内で利用可能なローカル変数です。