可変変数でeval()を使わずに対応する方法

Question

例えば、以下の様な関数を作る場合var Circleを重複させないためにarea+Circleの様なユニークな変数を作ろうと直感的に考えます。下記の例で言えば、目黒区以外に他に22区もあるのでこれをfunctionにして使いまわそうと考えています。

function circleDraw(latlng,area,jpn,scale,color){
  var area+Circle = L.circle(latlng, scale,{
      color: 'color',
      weight: 1,
      opacity: 0.8,
      fillColor: 'color',
      fillOpacity: 0.3
  }).bindPopup("<span>"+jpn+"</span>");


    $('input[name="'+area+'"]').on('click', function() {
      if($(this).prop('checked') == true){
        area+Circle.addTo(map); //このために独自の変数が必要
      }else if($(this).prop('checked') == false){
        map.removeLayer(area+Circle); //このために独自の変数が必要
      }
    })
}
circleDraw([35.62185988960938,139.6867664113381],"meguro","目黒区",5000,"#00b2ff");

もちろん、JSではvar area+Circleの様な方法は当然認められず、Uncaught SyntaxError: Unexpected token '+'がdebugで出力されます。

この様に可変変数を使おうと思った場合、まず思いつくのがevalであると思うのですが、当然MDNのリファレンスでも使うべきではないと言及されているので、他の方法を考えるのですが、上記の様な場合で使い回す方法としてどうしてもeval()意外に方法が思いつかないのですが、実務で慣れている場合にはどの様なアイデアで対応されるのが一般的なのでしょうか？

よろしくお願い申し上げます。

Answer 1

実務で慣れている場合にはどの様なアイデアで対応されるのが一般的なのでしょうか？

「可変変数」などという珍奇な発想をするのではなく、どんな言語にも存在する配列やリスト、辞書等のコレクションを利用する方法を使います。

Comments

[pegy]

コメントありがとうございます。
「JavaScript 変数名に変数」「JavaScript 変数 動的」などで検索するとeval()ばかり出てきて、配列やコレクションの方法は特に出てこないですが、もう少し調べてみます。

[gentaro]

そりゃ調べ方が悪いだけです。普通に「配列」「リスト」等で調べればいい。
そもそも「変数名をプログラム実行中に変更する」などという発想を捨ててください。
変数というのは、中身が動的に変わることがあっても、変数名そのものをプログラム実行時に変更するような使い方をするものではありません。
あなたが数学の問題を解いている時、y=x+1のxが計算中にいきなりzになったりしますか？

[pegy]

ご返信ありがとうございます。通常の数学の計算ではループという考え方を用いたことがないので、「変数が変化すべきではない」という感覚は正直分かりませんが、「変数が可変する」という発想を根本的にすべきではないという考え方は備えたいと思います。
さて、配列やコレクションといったものは最低限は理解しているつもりですが、ここで利用するのであれば、functionとして一般化すべきではなく、下記の様に連想配列にして、ループ処理の発想が実務的という意味合いで適切でしょうか？
{meguro:{latlng:[35.62185988960938,139.6867664113381],color:"#FFFFFF"},shibuya:{latlng[35.66259623612342,139.69383377253456],color:"#000000"}}
の様にしてループさせて処理する様な感覚が適切であろうというご意見でしょうか？

[gentaro]

上記回答は「可変変数」なるモノに対してのものなので、質問文のコードは全然読んでなかったけど、そもそも「var Circleを重複させないために」というところから間違っていますね。
その関数のスコープで利用される変数は１つしか登場しないので、単に「var circle」にしておけば良いんじゃないですか？
これ、何が重複すると思いました？

[pegy]

おっしゃる通りです、何も重複いたしません。var circleでfunctionのなかの変数は1つで何も問題がなかったです。大変失礼いたしました。お付き合いをさせてしまい改めてお詫びを申し上げますが、変数を
可変化すべきではないという考え方は肝に命じておこうと思います