javascriptのvar有/無・let・constの違いと使い分け【ECMAScript2015】

結論として、 変数宣言で、var無し、var有りは両方とも非推奨。let（再代入可能、再宣言不可）かconst（再代入不可、 再宣言不可 ）を使いましょう。ECMAScript2015からとなります。

var無し

基本的に使ってはダメ。スコープの外側の変数を参照／変更してしまうため。

var有り

こちらも基本的に使わない。

• 再宣言可能
• 再代入可能
• バージョンによるかもですがChromeではdelete演算子で削除できない（IEとFirefoxでは削除できる）
• ifやfor文の中で宣言し、文の外で使える
• 関数内のどこでもvarの宣言を書ける
• 関数のどこで宣言しても、先頭で定義したものとしてみなされる（巻き上げが起こる）
• 関数スコープ（ 関数内ならどこからでも参照できる ）

変数の巻き上げ（hoisting）とは？

関数内で宣言されたローカル変数すべて、関数の先頭で宣言されたものとみなされること。関数内の最下行でローカル変数を宣言・代入しても、変数の行以上にあるプロパティやメソッドよりも巻き上がって代入されず、自動で宣言だけされてしまう。気が利いているのか利いていないのか微妙な仕様。

var hogeを関数外で宣言と代入を行い、関数内でもvar hogeに再宣言と再代入を行うと、関数の先頭で宣言だけを行ったとみなされ、関数内var hogeよりも上の行ではすべてundefinedでvar hogeを拾えません。

var hoge = "globalhoge";
 
function func() {
    console.log('log01:' + hoge); 
    var hoge = "localhoge";
    console.log('log02:' + hoge);
}
func();

//log01:undefined
//log02:localhoge

巻き上げを考えると、関数内で使う全ローカル変数を関数内の最上行で宣言・代入しておくというコーディングルールは重要。

let

• 再代入可能
• 再宣言禁止
• ifやfor文の中で宣言し、文の外で使えない（ブロックスコープ）
• 巻き上げはおきる
• 概ねvarの代わりに以下の様に再代入可能として使う

let name = 'nissy';
name = 'nessy';

const

• 再代入禁止
• 再宣言禁止
• ifやfor文の中で宣言し、文の外で使えない （ブロックスコープ）
• 巻き上げはおきる
• 以下の様にCONFIGなど定数を作るのにおススメ。

const CONFIG = {
  MAX_NUMBER : 100 ,
  MIN_PERCENTAGE : 35
}

console.log(CONFIG.MAX_NUMBER);//100