JavaScriptにおける変数宣言の種類の違い（const/var/let）

JavaScriptにおける変数宣言時の種類に関して、なんとなくconstを使っていれば問題ないと思っていましたが、そもそもの違いは何なのかなんとなくしかわかっていなかったので、簡潔に纏めます。

ちなみにlet/constはECMAScript2015で制定された新しい宣言方法です。

再代入の可不可

var/let　・・・　再代入可

const ・・・ 再代入不可

再代入とは、以下のような記述になります。

var hoge = 'ほげ';
hoge = 'ふが';

console.log(hoge); // ふが

要約すると、変数の中身を書き換えられるかそうでないかです。

これによるメリットは、再代入不可のconstで変数定義された場合、その変数の中身は変わらないためコードの可読性が上がる点です。

そもそも冷静に考えるとconst=constant（定数）の略なので、単語の意味が分かれば用途も自ずとわかるはず。（自分はわかりませんでした。）

再宣言の可不可

var ・・・ 再宣言可

let/const ・・・ 再宣言不可

再宣言とは、上記で説明した再代入と似ていますが、微妙に異なります。

一度宣言した変数を、同じ変数名で再度宣言することを再宣言と言います。

var hoge = 'ほげ';
var hoge = 'ふが';

console.log(hoge); // ふが

再宣言が行われてしまうと、変数自体の意味や役割も変わってきてしまう可能性がある為、注意が必要です。

スコープ範囲

var ・・・ グローバルスコープ

let/const ・・・ ブロックスコープ

スコープとは、変数が利用できる範囲のことです。ブロックスコープは{}で括られた範囲内を指すのに対し、グローバルスコープは範囲がありません。

// varで宣言した場合
function chkHoge() {
  var hoge = 'ほげ';
}
console.log(hoge) // ほげ

// let/constで宣言した場合
function chkHoge() {
  let hoge = 'ほげ';  
}
console.log(hoge) // エラー

varの場合だと、どこで使用されていた変数かわかりずらく、また変数の値に関しても一定ではないため、可読性が悪いです。

まとめ

下記図に纏めました。

基本的にはconstを使用、以下のようにfor文等で再代入する必要がある際はletを使用する　と言った位置づけでよいと考えています。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

そして特別な事情が無い限りvarは使用しないのがベターなのかなと思います。