手抜きのjavascript -var編-

富士通ソーシアルサイエンスラボラトリ Advent Calendar 13日目！

はじめに

javascriptで、どのような変数宣言でもついつい「var」を使いますよね。
使いますよね？
そのようなアナタのために、なるべくvarを利用してみる方法をご紹介・・・
しているようで、varのみ利用はめんどくさいという記事。

結論

まぁ、普通に「let」や「const」を使い分けた方がいいっす。
letやconstの詳しい説明は、ES6の新機能: 「let」「const」宣言を調べてみたとか、
letとvarの違いとかみてみてください。
（こうやって手を抜いていくスタイル）

手を抜きたい

javascriptでは、変数宣言には長らくvarが使われてきました。
が、ES6にてletやconstが追加され、変数を安全に利用することが可能となりました。
（ES6ってなに？という方は、ES2015(ES6) 入門とかみるとよいかも）

しかし、長年varを打ってきた手は、なかなかletとは打ってくれません。
癖を治すのはめんどくさい。
なので、プログラムの書き方の工夫による解決方法を無駄に探ってみました。

その１：とにかく即時関数をつかう

varというのは、関数スコープです。
関数スコープとは、その名の通り関数（function）内で有効となります。
例えば、ありがちなのが

function sample(){
  var rtn = "";
  var lenA = 1;
  var lenB = 2;
  for (var i = 0; i <= lenA; i++){
    rtn += "[" + i + "]";
    for (var i = 0; i <= lenB; i++){
      rtn += (i===0 ? i : ","+i);
    }
  }
  return rtn;
}

というのを書いてしまう場合。
期待する結果は「[0]0,1,2[1]0,1,2」なのですが、iをダブって使っているため
「[0]0,1,2」という結果が返ってきてしまいます。
関数内のコードが長く、複数のループを利用している場合にやりがちなミスです。

このような場合、即時関数を利用してこう書いてしまいましょう。

function sample(){
  var rtn = "";
  var lenA = 1;
  var lenB = 2;
  (function(){
    for (var i = 0; i <= lenA; i++){
      rtn += "[" + i + "]";
      (function(){
        for (var i = 0; i <= lenB; i++){
          rtn += (i===0 ? i : ","+i);
        }
      })();
    }
  })();
  return rtn;
}

即時関数って何？ってかたは、JavaScript基礎 即時関数とかみてみてください。
varは関数スコープなので、ループ部分を即時変数化してしまえば問題ないのです！
みなさん、varのみで変数指定したい場合は、forやifなどのブロックを見たら
とにかく即時関数化していきましょう！
（注：みなさんお気づきと思いますが、頭の悪い発想です。マネしてはいけません）

その２：prototypeを利用してみる

いっそ、prototype宣言を利用してみるというのも手です。

function sample(){
  this.rtn = "";
  this.lenA = 1;
  this.lenB = 2;
}

sample.prototype.itemA = function() {
    for (var i = 0; i <= this.lenA; i++){
        this.rtn += "[" + i + "]";
        this.itemB();
    }
};

sample.prototype.itemB = function() {
    for (var i = 0; i <= this.lenB; i++){
        this.rtn += (i===0 ? i : ","+i);
    }
};

var s = new sample();
s.itemA();  //これで、s.rtnは「[0]0,1,2[1]0,1,2」となる

prototypeの場合はnewした単位で変数が保持されるので、
似たような処理が複数ある場合に有効です。
さらにprototype宣言で記載しようとすると関数内の処理は単機能となりがちなので、
varによる変数設定ミスが起きにくくなります。
（注：みなさんお気づきと思いますが以下略）

なお、ちゃんとしたprototype宣言の詳細は、
JavaScriptのプロトタイプからオブジェクト指向を学ぶとかをご参照ください。

結局

varの利用であれこれ考えるよりは、用途に応じてletやconstを利用したほうが良いです。
当たり前ですが。
ついついvarと打ってしまう方は、ちょっと注意してみましょう。

しかし、javascriptはいろいろな書き方がありますね。

ちなみに今回マークダウン初めてだったので、Qiita Markdown 書き方 まとめを参照しました。
ありがとうございます。（あまり活かせていませんけど）