JavaScriptにて配列を呼び出し関数を実行したい

Question

前提・実現したいこと

そもそも実現できないかもしれないのですが、配列を呼び出して関数を実行させたいです。
キー値を指定した配列を呼び出したときに、定義していた関数を実行し、配列のキーを引数として関数に渡し、関数の戻り値を返したいというのが実現したいことになります。

例としては、以下のような内容になります。

// 配列の呼び出し（変更不可）
var ret = ary[key]; // ←でary関数をコールしたい（事情があり改変ができません）
console.log(ret);

// 配列に該当する関数（変更可） ←配列の呼び出しでこの関数をコールさせたい
function ary(key){ // ←の引数keyには配列aryのkeyの内容を格納したい
  // 処理を行う関数をコール
  return hoge(key);
}

// 処理を行う関数（変更不可）
function hoge(key){
  // 実際はkeyを元に処理した結果を返す予定です
  return "キー値は"+key;
}

試したこと

・上記コードのように配列と関数名を同じにしたが、当たり前のように関数はコールされなかった
・配列内に関数を格納してみたが指定した配列の関数をコールする形になるため希望と違った

配列を呼び出して関数を実行し、配列のキー値を引数として渡すことが、おかしいとは思いますが、もし良い手段があればお教え頂けると助かります。

よろしくお願い致します。

Answer 1

ちょっと何をしたいのか分からないですが、Proxyを使ってみてはどうでしょうか。
Proxy - JavaScript | MDN

var ary = [100,200,300];
var target = ary;
var ary = new Proxy(target, {
  get: function (target, key){ 
    // 処理を行う関数をコール
    return hoge(key);
  }
})

// 処理を行う関数（変更不可）
function hoge(key){
  // 実際はkeyを元に処理した結果を返す予定です
  return "キー値は"+key;
}



var key = 0;
var ret = ary[key];
console.log(ret);
// キー値は0

もちろん、aryでは普通に配列を参照することができなくなりますが……

Comments

[ma_ya]

すごい！！！できました！！！ありがとうございました！！！
参考に頂いたコードそのままでいけました。

元々、静的に記述された配列を読んで処理していた箇所を、新たに関数化して処理することになり、配列の呼び出しているコードが変更不可でしたので、配列の呼び出し方のまま関数が叩けるのかを苦悩していました。説明が下手で申し訳ないです。

勉強になりました。ありがとうございました。

[Lhankor_Mhy]

水を差すようで申し訳ないのですが、Proxy はブラウザ対応に難があります。
たいていの場合は、Babel通してpolyfillで何とかなるものなのですが、私見ですが、Proxyの完全なpolyfillは作れないと思います。

IE11などに対応する必要がないのであればいいのですが……　そうでないなら、BAを外して他の方の回答をお待ちください。

[Lhankor_Mhy]

さらに補足すると、配列で使える全てのメソッドやプロパティも壊します。
たとえば、ary.length は、配列の長さではなく "キー値はlength" を返します。

for ループなどで参照をしているなら、まともに動かないと思います。どうぞ、よくご確認の上、ご使用ください。

[ma_ya]

なるほど、フォローするブラウザやProxy等確認してみます。
ありがとうございました。

[ma_ya]

以下、Proxy使ったバージョンにてブラウザで確認した結果を載せておきます。

●Windows 10
Ie11 NG
Edge NG
Firefox OK
Chrome OK

●Mac High Sierra
Safari OK
Firefox OK
Chrome OK

今回はIEも対応が必要でしたので、配列形式で読み込んでいた場所を全部関数でコールするよう回収することになりました。
お手数おかけしました。ありがとうございました。

[Lhankor_Mhy]

お疲れ様でした。
IE対応する抜け道がないこともないかとは思いますが、おそらくバグの温床になりますし、それが一番無難かと思います。

Answer 2

const key = Symbol('key');
Object.defineProperty(Array.prototype, key, {
  value: function (index) {
    return "キー値は" + index;
  }
});

const arr = ['a', 'b', 'c'];

arr[key](2) // =>  'キー値は2'

指定されている制約違反にだいぶなってると思いますが、こんなのとか。
というか何をしたいのか分かっていません。

Comments

[ma_ya]

すいません。元々、静的に記述された配列を読んで処理していた箇所を、新たに関数化して処理することになり、配列の呼び出しているコードが変更不可でしたので、配列の呼び出し方のまま関数が叩けるのかを苦悩していました。そういう部分で制約がありました。説明が下手で申し訳ないです。